Javascript, JSP input value is being updated for every append

Question

I'm trying to append a new DIV every time the user clicks on a button. For this I'm using this function:

function afficherMyObject(blocParent, myID) {

$q(".tdChampMyObject", blocParent).append('<div class="identifiantMyObjectDiv' + recupererIndexMyObject(myID) + '" style="margin-bottom: 5px">' +
    '<input type="hidden" name="myForm[' + recupererIndexMyObject(myID) + ']" ' +
    'id="identifiantMyObjectHiddenBlc' + recupererIndexMyObject(myID) + '" class="identifiantMyObjectHidden" value="' + myID + '"/>' +
    '<a href="#" class="myIDLink">'+
    '<span class="identifiantMyObjectSpan">' + myID + '</span></a>' +
    '<br></div>');
} 

However when I check the display code I can see that for each append that I make I have always the same input value which is the last added value

<div class="identifiantMyObjectDiv0" style="margin-bottom: 5px">
<input type="hidden" name="myForm[0]" id="identifiantMyObjectHiddenBlc0" 
class="identifiantMyObjectHidden" value="5003">
<span class="identifiantMyObjectSpan">3002</span>
<br></div>

<div class="identifiantMyObjectDiv1" style="margin-bottom: 5px">
<input type="hidden" name="myForm[1]" id="identifiantMyObjectHiddenBlc1" 
class="identifiantMyObjectHidden" value="5003">
<span class="identifiantMyObjectSpan">5003</span>
<br></div>

can anyone help me to fix this?

Answer 1

I fixed that by adding an id to the div's classname, so that every div will be inserted with a different class name