Jquery html() for particular rows - php

Question

I have created dynamic rows with type(select),name(text),unit(select), I was writing the code for on change type's select.
But when I change the value from type field it had load the value into current row name field and load option dynamically into current unit select field,
Loading value into active rows is working fine, but loading options into select unit is not.
My code is given below
$(document).on('change', '.raw', function () {
// var r = this.val();
if ($(this).val() != 0) {
var t = $(this).parents('tr').find(".raw :selected").text();
$(this).parents('tr').find(".name").val(t);
where I need help is given below
$(this).parents('tr').find(".amount").html(data); -> here i need help
// $(".amount").html(data); ->this working fine but change all the select value
Thanks in advance.
here my full coding for my table
<table id="addingtable" class="table table-bordered">
<tr>
<th>Raw Master</th>
<th>Name</th>
<th>Display</th>
<th>Value</th>
<th>Unit</th>
<th>Delete</th>
</tr>
<tr>
<td><select name='rawmaster[]' class = 'form-control raw' required><option>Select</option><?php echo rawmaster_item($conn,$type); ?><option value="0">None</option></select></td>
<td><input type='text' name='name[]' placeholder="Name" class = 'form-control name' required /></td>
<td><select name='des[]' class = 'form-control' required><option>Select</option><option Value = 'y'>Yes</option><option Value = 'n'>No</option></select></td>
<td><input type='text' name='value[]' placeholder="Value" class = 'form-control' required /></td>
<td><select name='amount[]' class = 'form-control amount' required><option>Select</option><?php echo $output2; ?></select></td>
<td><button type='button' class='btn btn-icon btn-danger remove'><i class='feather icon-trash-2'></i></button></td>
</tr>
my jquery for adding rows
$(document).on("click", ".addrows", function (event) {
{
// var planid = $("#plan_id").val();
// alert(planid);
var html = '';
html += "<tr>";
html += "<td><select name='rawmaster[]' class = 'form-control raw'><option>Select</option><?php echo rawmaster_item($conn,$type); ?><option value = '0'>None</option></select></td>";
html += "<td><input type='text' name='name[]' placeholder='Name' class = 'form-control name' /></td>";
html += "<td><select name='des[]' class = 'form-control'><option>Select</option><option Value = 'y'>Yes</option><option Value = 'n'>No</option></select></td>";
html += "<td><input type='text' name='value[]' placeholder='Value' class = 'form-control' /></td>";
html += " <td><select name='amount[] amount' class = 'form-control amount' required><option>Select</option><?php echo $output2; ?></select></td>";
html += "<td><button type='button' class='btn btn-icon btn-danger remove'><i class='feather icon-trash-2'></i></button></td>";
html += "</tr>";
$("#addingtable").append(html);
}
});
my jquery for onchange select values
$(document).on('change', '.raw', function () {
// var r = this.val();
if ($(this).val() != 0) {
var t = $(this).parents('tr').find(".raw :selected").text();
$(this).parents('tr').find(".name").val(t);
$(this).parents('tr').find(".name").attr("readonly", "TRUE");
var r = $(this).parents('tr').find(".raw").val();
// alert(r);
$.ajax({
url:"plandetails_getunit.php",
method:"POST",
data:"id="+r,
success:function(data)
{
if(data)
{
$(this).parents('tr').find(".amount").html(data); => need help here
// $(".amount").html(data);
}
}
});
}
else{
$(this).parents('tr').find(".name").val('');
$(this).parents('tr').find(".name").removeAttr("readonly");
var r = $("#ptype").val();
$.ajax({
url:"plandetails_getunit1.php",
method:"POST",
data:"id="+r,
success:function(data)
{
if(data)
{
// $(".amount").html(data);
$(this).parents('tr').find(".amount").val(); =>here remains work gud
}
}
});
}
});

Answer 1

I might be wrong but I think you need to set the context on the ajax request otherwise this will reference a different context (callback), adding context:this like this:
$.ajax({
url:"plandetails_getunit.php",
method:"POST",
data:"id="+r,
context:this,
success:function(data)
{