Jquery for loop cause update button fire multiple time
<p>I had some question that I not sure how actually to solve it, basically I will draw out a data and append into the web, and assign each data with it owns div button, which are remove and update, each click will remove all and reappend the data, code are as below</p>

<pre><code>function DrawData(){ var txtHd = $('input[id$="hidText1"]').val(); 
if (typeof(txtHd) != "undefined" || txtHd != "") //if have value
{ 
    var sSplit = txtHd.split(sDelimiter);
    var i;
    var div1, div2, div3, div4, div5, row1, comment;
    for (i=0;i&lt;=sSplit.length-1;i++){
        if (sSplit[i].trim() == "") { return true; }
        comment = "";
        iAdd1 = i + 1;
        div1 = "&lt;div class=container&gt;&lt;div id=" + sSplit[i] +" class=number&gt;" + iAdd1 + "&lt;/div&gt;";
        div2 = "&lt;div class=stage&gt;Level " + iAdd1 + "&lt;/div&gt;";
        div3 = "&lt;div class=name&gt;" + sSplit[i] + "&lt;/div&gt;";
        div4 = "&lt;div id=rem" + iAdd1 +" class=rem&gt;remove&lt;/div&gt;";
        div5 = "&lt;div id=upd" + iAdd1 +" class=upd&gt;update&lt;/div&gt;";;
        div6 = "&lt;div class=drfm&gt;Comment: " + comment +  "&lt;/div&gt;&lt;/div&gt;";

        row1 = div1 + div2 + div3 + div4 + div5 + div6;
        $('#dtdr').append(row1);
        $('#errmsg').fadeOut();
        removeValue(); //add remove function
        updateValue(); //add update function into the div
    }
}}

function updateValue(){
$('.upd').on('click', function(){ 
    var cLb=$('input[id$="hidText1"]').val();
    var updName = $(this).parent().find('.name').text();
    var repName = $('input[id$=fl_Approval]').val().trim();

    if (repName == ""){ $('#errmsg').text("Add error: [ Not allow to add empty name ]"); $('#errmsg').fadeIn(); return; } //check empty value
    if (checkArrayDup(repName,cLb) == true){ $('#errmsg').text("Add error: [ Name: "+ repName + " exist in the list ]"); $('#errmsg').fadeIn(); return; } //check duplicate

    updName = updName + sDelimiter;
    repName = repName + sDelimiter;
    var newVal= $('input[id$="hidText1"]').val().replace(updName ,repName);
    $('input[id$="hidText1"]').val(newVal);
    $('.container').remove();
    DrawData();
});
</code></pre>

<p>it work fine, but the problem now is, the code are not efficient, and I don't have any idea on how to fix this, the for loop had create multiple click handler at the update button, so whenever I click the button, like it say, I had 5 data on it, the first data will fire 5 times of click event, and second data will fire 4 times of click event, these will go on until last data and cause the checking on duplicate data not working properly, any idea on how to fix this? Sorry for my poor English, any help will be great</p>
