How select a sibling of parent element of $(this) in Jquery-CodePudding

This is my HTML. I have a select field and according to the option which I selected, I will update the price field with the corresponding price which I fetched using Ajax.

And also I need to input multiple rows on button click.

Duplicating is working fine. But I have some doubts while updating the price. Each col have same id so how do I update only its own price while option selection.

$(document).on('click', '.newrow-plus', function(e) {
    var $tr    = $(this).closest('.order-wastetypeRow');
    var $clone = $tr.clone();
    $clone.find(':text').val('');
    $tr.after($clone);
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
    <div >
        <div >
            <label>Waste type</label>
            <select  id="order-edit-wastetype">
                <option value="0" selected>Select one</option>
                    <option value="1">Gemischtes steiniges Material</option>
                    <option value="2">Sperrgut gemischt</option>
                    <option value="3">Gemischte Abfälle Brennbares Material</option>
                    <option value="4">Sortenreine Grünabfälle</option>
                    <option value="6">Sortenreiner Holzabfall unbelastet</option>
                </select>
        </div>
    </div>
    <div >
        <div >
            <label>Price</label>
            
            <input type="text"  id="order-edit-wasteprice" value="">
        </div>
    </div>
    <div >
        <div >
            <div >
                <button >-</button>
                <button > </button>
            </div>
        </div>
    </div>
</div>

This is the Ajax part to update price

$(document).on('change', '#order-edit-wastetype', function(e) {
    $wastetype_id = this.value;
    var url = window.location.href;
    var id = url.substring(url.lastIndexOf('/')   1);
    $.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        type: 'POST',
        url: BASE_URL   '/backend/dealer/get-wastetype-price',
        data: { 'id': $wastetype_id },
        dataType: 'json', 
        success: function(response) {
            $('#order-edit-wasteprice').val(response);
        }
  });
});

CodePudding user response：

id must be unique in the DOM, so it's better to update ids when you add new row, a simple solution could be using the length of .order-wastetypeRow, like this:

$(document).on('click', '.newrow-plus', function(e) {
  var rowLength = $('.order-wastetypeRow').length;
  var $tr       = $(this).closest('.order-wastetypeRow');
  var $clone    = $tr.clone();
  $clone.find(':text').val('').attr('id', `order-edit-wasteprice${rowLength}`);
  $clone.find('#order-edit-wastetype').attr('id', `order-edit-wastetype${rowLength}`)
  $tr.after($clone);
});

anyway, in your change handler, you can access to current select by ${this}, so you can find the corresponding input like belwo example:

$(document).on('click', '.newrow-plus', function(e) {
  var rowLength = $('.order-wastetypeRow').length;
  var $tr = $(this).closest('.order-wastetypeRow');
  var $clone = $tr.clone();
  $clone.find(':text').val('').attr('id', `order-edit-wasteprice${rowLength}`);
  $clone.find('#order-edit-wastetype').attr('id', `order-edit-wastetype${rowLength}`)
  $tr.after($clone);
});

$(document).on('change', '[id*=order-edit-wastetype]', function(e) {
  var target = $(this);
  var inp = target.closest('.order-wastetypeRow').find(':text');
  /* do ajax or whatever */
  inp.val(100); /*or the value recieved by ajax */
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >
    <div >
      <label>Waste type</label>
      <select  id="order-edit-wastetype">
        <option value="0" selected>Select one</option>
        <option value="1">Gemischtes steiniges Material</option>
        <option value="2">Sperrgut gemischt</option>
        <option value="3">Gemischte Abfälle Brennbares Material</option>
        <option value="4">Sortenreine Grünabfälle</option>
        <option value="6">Sortenreiner Holzabfall unbelastet</option>
      </select>
    </div>
  </div>
  <div >
    <div >
      <label>Price</label>

      <input type="text"  id="order-edit-wasteprice" value="">
    </div>
  </div>
  <div >
    <div >
      <div >
        <button >-</button>
        <button > </button>
      </div>
    </div>
  </div>
</div>