Change function is changing the wrong row

Question

I am using dynamic rows in combination with the onChange function. The first row is manually written in HTML and the other rows are created in Javascript.

I am using the count function to define the ID in the dynamic rows.

Here is an example of the rows that are manually written in HTML:

<div id="asdasd123">
<div id="row_id_1">
  <div>
    <select id="plusmin1" name="plusmin[]" onChange="getVers1(this.value)" data-srno="1">
      <option selected="disabled" value="0"> </option>
      <option value="1">Data one</option>
      <option value="2">Data two</option>
      <option value="3">Data three</option>
    </select>
  </div>

  <div class="form-group">
    <input type="text" name="totalprice[]" id="totalprice1" data-srno="1">
  </div>
</div>
<script>
  function getVers1() {
    var numVal1 = Number(document.getElementById('plusmin1').value);
    var totalValue = numVal1 * 100

    document.getElementById('totalprice1').value = totalValue.toFixed(2);
  }
</script>
<input type="text" name="total_item" id="total_item" value="1" />
<button type="button" name="add_row" id="add_row" class="btn btn-success">New row</button>

When you click on add_row the script add`s creates new rows with the following script:

<script>
  $(document).ready(function(){
  var count = 1;

    $(document).on('click', '#add_row', function(){
      count++;
      $('#total_item').val(count);
      var html_code = '';
      html_code += '<div id="row_id_'+count+'">';
          html_code += '<div><select id="plusmin'+count+'" name="plusmin[]" data-srno="'+count+'"><option selected="disabled" value="0"> </option><option value="1">Data one</option><option value="2">Data two</option><option value="3">Data three</option></select></div>';
          html_code += '<div class="form-group"><input type="text" name="totalprice[]" id="totalprice'+count+'" data-srno="'+count+'"></div></div>';

      $('#asdasd123').append(html_code);


      }
    });
        $(document).on('change', '[id^=plusmin]', function selectQuantity(selectedValue){
          var numVal2 = Number(document.getElementById('plusmin'+count+'').value);
          var totalValue2 = numVal1 * 100

          document.getElementById('totalprice'+count+'').value = totalValue2.toFixed(2);
        });
  });
</script>

I have a problem with the count in my script.

When I have just one row in my screen and change the value of plusmin1 the script runs the onchange verry well.

When I have two rows in my screen and change the value of plusmin2 the script also works. But when I change the value of plusmin1 the script changes totalprice2. Which is a textbox that I use for the second row.

Does someone know the reason for that? Why is the script changing the value for the second textbox when I change the value for the first row?

Answer 1

The main problem was, you have to set value to the text field corresponding to that particular select.

Suppose you are selecting option as 'Data Two', so it should set 200.00 in corresponding text field only. But in your case it was intended to set to text filed 2 which has not been added/created yet.

IDs of select(not option) and text-field will go hand-in-hand. Then you have set the value as per option selected.

I have tried to simulate.. please try.

<script type="text/javascript">
    $(document).ready(function(){
        var count = 1;

        $(document).on('click', '#add_row', function(){
            ++count;
            $('#total_item').val(count);
            var html_code = '<div id="row_id_'+count+'">'+
                            '<div>' +
                                '<select class="changePrice" id="plusmin'+count+'" name="plusmin[]" data-srno="'+count+'">' +
                                    '<option selected="disabled" value="0"> </option>' +
                                    '<option value="1">Data one</option>' +
                                    '<option value="2">Data two</option>' +
                                    '<option value="3">Data three</option>' +
                                '</select>' +
                             '</div>'+
                            '<div class="form-group">' +
                                '<input type="text" name="totalprice[]" id="totalprice'+count+'" data-srno="'+count+'">' +
                            '</div>' +
                        '</div>';

            $('#asdasd123').append(html_code);
        });
    });

    $(document).on('change', '.changePrice', function (){
        var optionIndex = $('option:selected',this).attr('value');
        var numVal2 = Number(optionIndex);
        var totalValue2 = numVal1 * 100;

        document.getElementById('totalprice'+optionIndex+'').value = totalValue2.toFixed(2);
    });

    function updatePrice() {
        var numVal1 = Number(document.getElementById('plusmin1 :selected').value);
        var totalValue = numVal1 * 100

        document.getElementById('totalprice1').value = totalValue.toFixed(2);
    }

</script>

$(document).ready(function(){
        var count = 1;

        $(document).on('click', '#add_row', function(){
            ++count;
            $('#total_item').val(count);
            var html_code = '<div id="row_id_'+count+'">'+
                            '<div>' +
                                '<select class="changePrice" id="plusmin'+count+'" name="plusmin[]" data-srno="'+count+'" updateToBox="'+count+'">' +
                                    '<option selected="disabled" value="0">select</option>' +
                                    '<option value="1">Data one</option>' +
                                    '<option value="2">Data two</option>' +
                                    '<option value="3">Data three</option>' +
                                '</select>' +
                                '<input type="text" name="totalprice[]" id="totalprice'+count+'" data-srno="'+count+'">'+
                             '</div>'+
                        '</div>';

            $('#asdasd123').append(html_code);
        });
    });

    $(document).on('change', '.changePrice', function (){
    //alert("clicked : "+$(this).val());
        var optionIndex = $(this).val();
        var updateToBox = $(this).attr('updateToBox');
        var numVal2 = Number(optionIndex);
        var totalValue2 = numVal2 * 100;

        document.getElementById('totalprice'+updateToBox+'').value = totalValue2.toFixed(2);
    });

    
    function getVers1() {
      var numVal1 = Number(document.getElementById('plusmin1').value);
      var totalValue = numVal1 * 100

      document.getElementById('totalprice1').value = totalValue.toFixed(2);
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="asdasd123">
Total fileds <input type="text" name="total_item" id="total_item" value="1" />
<button type="button" name="add_row" id="add_row" class="btn btn-success">New row</button>
<hr/>
<div id="row_id_1">
  <div>
    <select class="changePrice" id="plusmin0" name="plusmin[]" data-srno="0" updateToBox="0">
      <option selected="disabled" value="0">select</option>
      <option value="1">Data one</option>
      <option value="2">Data two</option>
      <option value="3">Data three</option>
    </select>
    <input type="text" name="totalprice[]" id="totalprice0" data-srno="1">
  </div>
</div>