jQuery onchange function not working on dynamically generated select tag

Question

Inside of dynamic table row, I have a select tag. On the first row through Ajax, I am able to change the select tag values but in the dynamic second-row select tag if I do any change it's reflecting on the first-row select tag, not on the same row.

What am I am doing wrong here?

$(document.body).on('change', '#carwash', function() {
  var washid = $(this).val();
  console.log(washid);
  if (washid) {
    $.ajax({
      type: 'POST',
      url: '<?php echo base_url();?>/Main/fetch_items',
      data: 'washid=' + washid,
      dataType: "html",
      success: function(response) {
        console.log(response);
        $('#product').html(response);
      }
    });
  }
});

$(document.body).on('click', '.product', function() {
  var product = $(this).val();
  console.log(product);
  $.ajax({
    type: 'POST',
    url: '<?php echo base_url();?>/Main/fetch_mesure',
    data: 'subid=' + product,
    dataType: "html",
    success: function(test) {
      console.log(test);
      $('#unit').val(test);
    }
  });

  $.ajax({
    type: 'POST',
    url: '<?php echo base_url();?>/Main/fetch_limit',
    data: 'subid=' + product,
    dataType: "html",
    success: function(test) {
      console.log(test);

      $('#quantity').val(test);
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl_posts" class="table table-bordered table-hover tbl">
  <thead>
    <tr>
      <td>Wash type</td>
      <td>Product </td>
      <td>Unit</td>
      <td>One wash requirment</td>
      <td>Action</td>
    </tr>
  </thead>
  <tbody id="tbl_posts_body">
    <tr id="rec-1">
      <td>
        <select class="form-control custom-select" name='washtype[]' required id='carwash'>
          <option value="">Choose washtype</option>
          ?php foreach($washtype as $row): ?>
          <option value="<?php echo $row->id; ?>">
            <?php echo $row->service_name; ?>
          </option>
          <?php endforeach; ?>
        </select>
      </td>
      <td>
        <select class="form-control custom-select product" name='product[]' required id='product'>
          <option value="">Choose Product</option>
          <?php foreach($itemlist as $row): ?>
          <option value="<?php echo $row->id; ?>">
            <?php echo $row->item_name; ?>
          </option>
          <?php endforeach; ?>
        </select>
      </td>
      <td>
        <input type="text" class="form-control" placeholder="wash limit" id="unit" name='unit[]' readonly>
      </td>
      <td>
        <input type="text" class="form-control" placeholder="wash limit" id='quantity' name='quantity[]' readonly>
      </td>
      <td>
        <div class="form-group has-success">
          <a class="btn btn-success btn-rounded pull-right add-record" data-added="0"> Add Row</a>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

You need to change the id's #carwash & #product by a common classes instead since the id should be unique in the same document else it will refer always to the first element (the one in your first line in this example), change the id in your HTML code by class like :

<select class="form-control custom-select carwash" name='washtype[]' required>
<select class="form-control custom-select product" name='product[]' required>

Then in your JS code :

$(document.body).on('change', '.carwash', function() {
  var washid = $(this).val();
  var product = $(this).closest('tr').find('.product');

  if (washid) {
    $.ajax({
      type: 'POST',
      url: '<?php echo base_url();?>/Main/fetch_items',
      data: 'washid=' + washid,
      dataType: "html",
      success: function(response) {
        product.html(response);
      }
    });
  }
});

Answer 2

1. If you need IDs, you need UNIQUE IDs

2. you do not need IDs if you use relative addressing:

   var washtype = $(this).closest("tr").find("[name='washtype[]']")

Answer 3

Just change the event of control.

 $(document.body).on('change', '.product', function() {
        var product = $(this).val();
        console.log(product);
        $.ajax({
            type: 'POST',
            url: '<?php echo base_url();?>/Main/fetch_mesure',
            data: 'subid=' + product,
            dataType: "html",
            success: function(test) {
                console.log(test);
                $('#unit').val(test);
            }
        });

        $.ajax({
            type: 'POST',
            url: '<?php echo base_url();?>/Main/fetch_limit',
            data: 'subid=' + product,
            dataType: "html",
            success: function(test) {
                console.log(test);

                $('#quantity').val(test);
            }
        })
    });