JQuery 获取不同行的选定选项值

Question

I have a problem with selected option value for different row. I succeed to get value for first row. What i want to do is different row item have different price.

My previous question about "JQuery Get Selected Option Value for Add Row" has been solved : Here

Now, i come out with another issues which is to get different value for different row. The picture sample is like below

My problem sample screenshot

Here's the code for my JS :

 var i=$('table tr').length; $(".tambah_sofa").on('click',function(){ /* add new row function start here */ html = '<tr id="row_'+i+'">'; html += '<td><button type="button" id="delete-button" data-row-delete="row_'+i+'">X</button></td>'; html += '<td><select id="sofa_'+i+'"><option value="10">hai</option><option value="20">20</option> <option value="50">50</option></select></td>'; html += '<td>X</td>'; html += '<td><input type="number" name="quantity[]" id="quantity_'+i+'" value="1" disabled="disabled"></td>'; html += '</tr>'; sidebar = '<tr id="row_'+i+'">'; sidebar += '<td><input style="width:50%;" name="sofa'+i+'" type="text" id="price_sofa'+i+'" value="" disabled="disabled"></td>'; sidebar += '</tr>'; $('#table_item').append(html); $('#table_sidebar').append(sidebar); /* Get selected option value start here */ $('body').on('change', '#sofa_'+i+'', function () { $('#price_sofa'+i+'').val($(this).find('option:selected').val()); }); /* Get selected option value end here */ i++; });

Answer 1

var i = $('table tr').length;
$(".tambah_sofa").on('click', function() {
  /* add new row function start here */
  html = '<tr id="row_' + i + '">';
  html += '<td><button type="button" id="delete-button" data-row-delete="row_' + i + '">X</button></td>';
  html += '<td><select id="sofa_' + i + '"><option value="10">hai</option><option value="20">20</option> <option value="50">50</option></select></td>';
  html += '<td>X</td>';
  html += '<td><input type="number" name="quantity[]" id="quantity_' + i + '" value="1" disabled="disabled"></td>';
  html += '</tr>';
  sidebar = '<tr id="row_' + i + '">';
  sidebar += '<td><input style="width:50%;" name="sofa' + i + '" type="text" id="price_sofa' + i + '" value="" disabled="disabled"></td>';
  sidebar += '</tr>';
  $('#table_item').append(html);
  $('#table_sidebar').append(sidebar);

  /* Get selected option value start here */
    (function(index){
      $('#sofa_' + index).on('change', function () {
        $('#price_sofa' + index).val($(this).val()); 
      });
    })(i);
  /* Get selected option value end here */
  i++;
});