JQuery Adding new Row in Table based on Selection, but Latest selection override the whole table everytime

Question

I am not good at javascript framework I am doing this project in Laravel

if required anything from that code where it's calling I will provide

What I am trying to achieve is that when the user selects a value from drop down which is the product a row is dynamically added which work perfectly fine.

Now this row contains data about the selected project its name description price and Quantity and Amount for the first time it works fine

Then adding a new product to the cart which also adds a row to the Table but the previous product record is also replaced by this product value.

First Image Selection of Product

Second Image Selection of another Product

There we go we lose the first product. and a product change, the latest product which comes cover the whole table with its data and the previous has vanished

Note

I set the value in the text field based on unique classes which I assigned.

Jquery Code

$('.ProductClass').delegate('.Product','change', function () {
  var inventory = $('.Product').html();
  var qty=1; 

  var n = ($('.neworderbody tr').length - 0) + 1;
  var tr = '<tr><td><input type="text" class="inventId form-control" name="inventId[]" readonly></td>' +

  '<td ><input type="number" class="qty form-control"  name="qty[]" ></td>' +

  '<td style="display: none;"><input type="text" class="costprice form-control" name="costprice[]" readonly></td>' +

  '<td><input type="text" class="price form-control" name="price[]" readonly></td>' +

  '<td><input type="text" class="amount form-control" name="amount[]" readonly></td>' +

  '<td><span class="fa fa-trash delete" data-toggle="tooltip" data-original-title="Remove Item" value="x" style="margin-left: 36px;margin-top: 14px;"></span></td></tr>';
  $('.neworderbody').append(tr);


        var tr = $(this).parent().parent();
        var inventory = $('.Product option:selected').attr('data-name');
        console.log(inventory);
        var SalesPrice = $('.Product option:selected').attr('data-price');
        var CostPrice = $('.Product option:selected').attr('cost-price');
        var description = $('.Product option:selected').attr('data-pro');
        $('.inventId').val(inventory);
        $('.price').val(SalesPrice);         

        $('.qty').val(qty);
        var qty = tr.find('.qty').val() - 0;
        var price = tr.find('.price').val() - 0;

        var total=qty*price;
        tr.find('.amount').val(total);
  //console.log(qty+"--------"+price);

});

Thankyou very much for helping me

When you add a new row, alsow add an incremental identifier to it. For ex, ` ` And then you can use like this `$('#row-1 .amount').val(total);` — Maharramoff, Feb 14 '18 at 13:39

score 0 · Accepted Answer · answered Feb 15 '18 at 14:38

Thank you, everyone, for concerning my question

I have found a solution to Embed the value in the text field so what I did just simply take the value of variables and then assign the value to the particular Text field in the Table

It works perfectly fine

If anyone has good solution, please share

Code

   $('.ProductClass').delegate('.Product','change', function () {
  var inventory = $('.Product').html();
  var qty=1; 
  var inventory=null;
  var n = ($('.neworderbody tr').length - 0) + 1;
  n=1;
  var inventory = $('.Product option:selected').attr('data-name');
  //onsole.log(inventory);
  var SalesPrice = $('.Product option:selected').attr('data-price');
  var CostPrice = $('.Product option:selected').attr('cost-price');
  var description = $('.Product option:selected').attr('data-pro');
  var total=qty*SalesPrice;

  var tr = '<tr id="row">' + 

  '<td><input type="text" class="inventId form-control"  value='+inventory+' name="inventId[]" readonly /></td>'+

  '<td > <input type="number" class="qty form-control"  value='+qty+' name="qty[]" > </td>' +

  '<td style="display: none;"><input type="text" class="costprice form-control" name="costprice[]"  value='+CostPrice+' readonly></td>' +

   '<td><input type="text" class="price form-control" name="price[]"   value='+SalesPrice+' readonly></td>' +

   '<td><input type="text" class="amount form-control" name="amount[]"  value='+total+' readonly></td>' +

   '<td><span class="fa fa-trash delete" data-toggle="tooltip" data-original-title="Remove Item" value="x" style="margin-left: 36px;margin-top: 14px;"></span></td>' +
    '</tr>'; 
  $('.neworderbody').append(tr);

});

JQuery Adding new Row in Table based on Selection, but Latest selection override the whole table everytime

1 Answers1