Q: Referencing HTML elements I am looking that if certain element could be referenced so, If I make any change to the one it also makes change in the other. For example,
<div id="trigger" data-referencedID="meter voltmeter ammeter vmeter">Trigger</div>
...
...
<div id="meter">
    <!-- Its children goes here -->
</div>
...
...
<div id="voltmeter">
    <!-- Its children goes here -->
</div>
...
...
<div id="ammeter">
    <!-- Its children goes here -->
</div>
...
...
<div id="vmeter">
    <!-- Its children goes here -->
</div>

Now in jQuery or JS:
$("#trigger").click( function() {
   $(this).addClass("animated"); // The same class will be also added to the elements defined in attribute.
});

I could do it like this:
$("#trigger").click( function() {
   var a = $(this).data("referenced").split(" ");
   for(var i = 0; i < a.length; i++) {
      $("#"+a).addClass("animated");
   }
   $(this).addClass("animated");
});

But it is not good looking and convenient plus I can have more main elements with referenced attribute.
How can I easily add referencing in my document?

A: You can use a class for all referenced elements like:
<div id="trigger" data-reference="reference_1">Trigger</div>

<div id="meter" class="reference_1"></div>
<div id="voltmeter" class="reference_1"></div>

And in your jQuery part:
$("#trigger").click( function() {
    var e = $(this);
    e.addClass("animated");
    $('.' + e.data('reference')).addClass("animated");
});


A: How about a reverse referring? Add classes in the meters which points to the trigger. This way you may add any number of meters which referring the trigger:
<div id="trigger">Trigger</div>
...
...
<div id="meter" class="ref-trigger">
    <!-- Its children goes here -->
</div>
...
...
<div id="voltmeter" class="ref-trigger">
    <!-- Its children goes here -->
</div>
...
...
<div id="ammeter" class="ref-trigger">
    <!-- Its children goes here -->
</div>
...
...
<div id="vmeter" class="ref-trigger">
    <!-- Its children goes here -->
</div>

And change the click handler for trigger as follows:
$("#trigger").click( function() {
   $('.ref-trigger').addClass("animated");
});

How about this?

A: You can use an attribute on referenced elements:
<div id="trigger">Trigger</div>
...
...
<div id="meter"  data-reference="trigger">
    <!-- Its children goes here -->
</div>
...
...
<div id="voltmeter" data-reference="trigger">
    <!-- Its children goes here -->
</div>
...
...
<div id="ammeter" data-reference="trigger">
    <!-- Its children goes here -->
</div>
...
...
<div id="vmeter" data-reference="trigger">
    <!-- Its children goes here -->
</div>

And then you access all referencing elements this way:
$("#trigger").click( function() {
   $("#trigger, [data-reference=trigger]").addClass("animated"); 
});

The [data-reference=trigger] parts of the query match all elements that has an attribute reference with a value of trigger.
