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

Question

I need to display the rows which are closest to drop down with that drop down value. But here whats happening is if I add a row, on change of drop down the values are getting replaced with that 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 i = 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 the 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.

Answer 1

Here is a working fiddle with applying the selected value to only the inputs in that row:

$(document).on('change', '.BundleAssetType', function() {

  var class1;
  var id = $(this).val();
  
  class1 = $(this).parents('tr').find("input[type='text']").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 i = 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 the 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>

Answer 2

It’s because here

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

you are selecting all elements in the whole document that have those classes.

You can fix this by passing in the closest TR (let’s store that in a variable for performance reasons, since you use that multiple times) as the context when selecting those elements by 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 as context
  $('.' + class2, closest_tr).val(id); // makes it search for elements
  $('.' + class3, closest_tr).val(id); // only that are inside of that 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 i = 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 the 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>