cloned select <option> changes the first select value

Question

Here's my code for cloning the select option:

var clone = $('#saleTable tbody>tr#saleTR:last').clone(true);
            clone.find("input").val('');
            clone.insertAfter('#saleTable tbody>tr#saleTR:last');

Here's my HTML:

<tr id="saleTR">
  <td>
    <input name="qty[]" type="text" size="5" />
  </td>
  <td> 
    <select name="description[]" onchange="showPrice(this.value)">
      <option value="null">select Item sold</option>
      <?php getSaleItem(); ?>
    </select>
  </td>
  <td>
    <span id="price"></span>
  </td>
  <td>
  </td>
</tr>

I'm using ajax to display the prices:

function showPrice(str){
    if (str.length==0){ 
        document.getElementById("price").innerHTML="";
        return;
    }
    if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }else{// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            document.getElementById("price").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","getPrice.php?q="+str,true);
    xmlhttp.send();

}

The <tr> is cloned fine but when the last cloned select option is selected or changed, the first price is the one that keeps on changing not the corresponding price ie the first original price keeps changing instead of the one corresponding in-line with the select option change.

I want a particular select option to update the corresponding price.

Answer 1

In your html you can pass this object to your ajax function and than you can use this pointer to select your corrosponding price span.

This may work for you

HTML

<tr id="saleTR">
    <td>
        <input name="qty[]" type="text" size="5" />
    </td>
    <td>
        <select name="description[]" onchange="showPrice(this)">
            <option value="null">select Item sold</option>
            <?php getSaleItem(); ?>
        </select>
    </td>
    <td><span id="price"></span>
    </td>
    <td></td>
</tr>

JAVASCRIPT

function showPrice(selectBox) {
    var str = selectBox.value;
    var corSpan=$(selectBox).closest('#saleTR').find('#price');
    if (str.length == 0) {
        corSpan.html() = "";
        return;
    }
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            corSpan.html(xmlhttp.responseText);
        }
    }
    xmlhttp.open("GET", "getPrice.php?q=" + str, true);
    xmlhttp.send();

}

see similar example http://jsfiddle.net/Yamw6/