values are getting replaced with the same values on change - jquery -

i need display rows closest drop down drop down value. here whats happening if add row, on change of drop down values getting replaced value.

$(document).on('change', '.bundleassettype', function() {      var class1 = class2 = class3 = class4 = '';    var id = $(this).val();        class1 = $(this).closest('tr').find("td:eq(1) input[type='text']").attr('class').split(' ')[1];    class2 = $(this).closest('tr').find("td:eq(2) input[type='text']").attr('class').split(' ')[1];    class3 = $(this).closest('tr').find("td:eq(3) input[type='text']").attr('class').split(' ')[1];    class4 = $(this).closest('tr').find("td:eq(4) input[type='text']").attr('class').split(' ')[1];        $('.' + class1).val(id);    $('.' + class2).val(id);    $('.' + class3).val(id);    $('.' + class4).val(id);    });    $(document).on('click', '.add', function() {    var $tr = $(this).closest('tr');    var $lasttr = $tr.closest('table').find('tr:last');    var $clone = $lasttr.clone();      $clone.find('td').each(function() {      var el = $(this).find(':first-child');      var id = el.attr('id') || null;      if (id) {        var = id.substr(id.length - 1);        var prefix = id.substr(0, (id.length - 1));        el.attr('id', prefix + (+i + 1));      }    });      $clone.find('input:text').val('');    $tr.closest('tbody').append($clone);      });    $(document).on('click', '.deleteb', function() {    //dont delete last data row    var parentid = $(this).closest('table').attr('id');      if ($('#' + parentid + '  tr').length > 3) {      var $tr = $(this).closest('tr');      $tr.remove();      }    });

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <table class="table table-bordered table-stripped" id="tableone" style="width: 100%">    <thead>      <tr>        <th></th>        <th colspan="2" style="text-align: center">am</th>        <th colspan="2" style="text-align: center">pm</th>        <th></th>      </tr>      <tr>        <th width="30%">category</th>        <th width="15%">weekday</th>        <th width="15%">weekend</th>        <th width="15%">weekday</th>        <th width="15%">weekend</th>        <th width="10%"></th>      </tr>    </thead>    <tbody>      <tr>        <td>          <select class="form-control bundleassettype" autocomplete="off" name="asset_category_id[]">            <option value="">--select category --</option>            <option value="4">medium roller</option>            <option value="2">paver</option>            <option value="1">small roller</option>            <option value="3">sweet paver</option>          </select>          </td>        <td>          <input type="text" autocomplete="off" name="weekday_am[]" class="form-control weekdayassetam">        </td>        <td>          <input type="text" autocomplete="off" name="weekend_am[]" class="form-control weekendassetam">        </td>        <td>          <input type="text" autocomplete="off" name="weekday_pm[]" class="form-control weekdayassetpm">        </td>        <td>          <input type="text" autocomplete="off" name="weekend_pm[]" class="form-control weekendassetpm">        </td>        <td>          <div class="btn-group btn-group-sm" role="group" aria-label="">            <button type="button" class="add btn btn-sm btn-primary">+</button>            <button type="button" class="deleteb btn btn-sm btn-danger">-</button>          </div>        </td>      </tr>    </tbody>  </table>

any suggestions, please.

it’s because here

  $('.' + class1).val(id);   $('.' + class2).val(id);   $('.' + class3).val(id);   $('.' + class4).val(id); 

you selecting all elements in whole document have classes.

you can fix passing in closest tr (let’s store in variable performance reasons, since use multiple times) context when selecting elements class:

$(document).on('change', '.bundleassettype', function() {      var class1 = class2 = class3 = class4 = '';    var id = $(this).val();    var closest_tr = $(this).closest('tr');      class1 = closest_tr.find("td:eq(1) input[type='text']").attr('class').split(' ')[1];    class2 = closest_tr.find("td:eq(2) input[type='text']").attr('class').split(' ')[1];    class3 = closest_tr.find("td:eq(3) input[type='text']").attr('class').split(' ')[1];    class4 = closest_tr.find("td:eq(4) input[type='text']").attr('class').split(' ')[1];      $('.' + class1, closest_tr).val(id); // passing closest_tr context    $('.' + class2, closest_tr).val(id); // makes search elements    $('.' + class3, closest_tr).val(id); // inside of tr    $('.' + class4, closest_tr).val(id);    });    $(document).on('click', '.add', function() {    var $tr = $(this).closest('tr');    var $lasttr = $tr.closest('table').find('tr:last');    var $clone = $lasttr.clone();      $clone.find('td').each(function() {      var el = $(this).find(':first-child');      var id = el.attr('id') || null;      if (id) {        var = id.substr(id.length - 1);        var prefix = id.substr(0, (id.length - 1));        el.attr('id', prefix + (+i + 1));      }    });      $clone.find('input:text').val('');    $tr.closest('tbody').append($clone);      });    $(document).on('click', '.deleteb', function() {    //dont delete last data row    var parentid = $(this).closest('table').attr('id');      if ($('#' + parentid + '  tr').length > 3) {      var $tr = $(this).closest('tr');      $tr.remove();      }    });

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <table class="table table-bordered table-stripped" id="tableone" style="width: 100%">    <thead>      <tr>        <th></th>        <th colspan="2" style="text-align: center">am</th>        <th colspan="2" style="text-align: center">pm</th>        <th></th>      </tr>      <tr>        <th width="30%">category</th>        <th width="15%">weekday</th>        <th width="15%">weekend</th>        <th width="15%">weekday</th>        <th width="15%">weekend</th>        <th width="10%"></th>      </tr>    </thead>    <tbody>      <tr>        <td>          <select class="form-control bundleassettype" autocomplete="off" name="asset_category_id[]">            <option value="">--select category --</option>            <option value="4">medium roller</option>            <option value="2">paver</option>            <option value="1">small roller</option>            <option value="3">sweet paver</option>          </select>          </td>        <td>          <input type="text" autocomplete="off" name="weekday_am[]" class="form-control weekdayassetam">        </td>        <td>          <input type="text" autocomplete="off" name="weekend_am[]" class="form-control weekendassetam">        </td>        <td>          <input type="text" autocomplete="off" name="weekday_pm[]" class="form-control weekdayassetpm">        </td>        <td>          <input type="text" autocomplete="off" name="weekend_pm[]" class="form-control weekendassetpm">        </td>        <td>          <div class="btn-group btn-group-sm" role="group" aria-label="">            <button type="button" class="add btn btn-sm btn-primary">+</button>            <button type="button" class="deleteb btn btn-sm btn-danger">-</button>          </div>        </td>      </tr>    </tbody>  </table>