Thinking of two elements as "the same"
<p>I have two jQuery elements, <code>$link = $('&lt;a&gt;')</code> and <code>$input = $('&lt;input/&gt;')</code>.</p>

<p>Although they are two different types of elements, they are in my code (and in my mind!) very linked:</p>

<p>1) Conceptually, they are different representations of one object.</p>

<p>2) They share the same attributes.</p>

<p>3) When one is displayed on the screen, the other is hidden.</p>

<p>Until now, I have used <code>.data()</code> to perform a link between the two:</p>

<pre><code>$link.data('$input', $input);
$input.data('$link', $link);
</code></pre>

<p>As my code became more and more complex, this solution has proved confusing and messy.</p>

<p>Is there a different approach I may want to consider? For example, is there a way to keep the attributes of the two elements continually synced? Is there a way to make one "meta-object" out of the two? etc.</p>
