grab multiple values from a few hidden fields and then display the values in other Input Text boxes accordingly

Question

Hi all,

I was learning JQuery and a question came across my mind.
Is it possible to grab multiple values from a few hidden fields and then display
the values in other Input Text boxes accordingly in the following case?

$(document).ready(function(){
$(".clickable").click(function(){
// display the values in the two hidden fields in each DIV tag to the Input Text box respectively
});
});

<div id="first" class="clickable">
<input type="hidden" value="a">
<input type="hidden" value="b">
</div>


<div id="second" class="clickable">
<input type="hidden" value="c">
<input type="hidden" value="d">
</div>

<input type="text" value="" id="displayA">
<input type="text" value="" id="displayB">

I don't think the JQuery next() API can help in this case.

Answer 1

Give the hidden fields all an identifiable class name, and the target fields a different identifiable class name:

<input type="hidden" class="sourceField" value="a" />
<input type="hidden" class="sourceField" value="b" />
....
<input type="hidden" class="destField" />
<input type="hidden" class="destField" />

Then you can line them up by index:

$('.sourceField').each(function(index) {
    $(".destField:eq(" + index + ")").val(this.value);
});