Jquery append new data to old ones has duplicate issue

Question

How can I add new data to old ones without duplicate my tables?

logic

1. I select option, data returns in table
2. I select different option, data adds to old ones

Issue

When I do second part of my logic it add new table as well, meaning based on how many times i change my selected option it adds new tables.

Screenshot

when i select my first option having 1 table

when i select my second option having 2 tables

What I want

What I want is when i select my second/third etc. option image 2, only have 1 table include data of all those past and current options and not to make 1 table for each of them.

Code

HTML

<div class="mt-20 options"></div>

JavaScript

<script>
    $(function(){
        $('select[name="options"]').on('change', function() {
            var addressID = $(this).val();
            if(addressID) {
                $.ajax({
                    url: '{{ url('admin/getoptions') }}/'+encodeURI(addressID),
                    type: "GET",
                    dataType: "json",
                    success:function(data) {
                        // $('div.options').empty();

                        $('div.options').append('<div class="mb-20"><h4>Check mark your needed options only</h4></div>'+
                          '<table id="table" class="table table-bordered table-hover table-responsive">'+
                          '<thead>'+
                            '<th width="50" class="text-center">Check</th>'+
                            '<th class="text-center">Title</th>'+
                            '<th class="text-center">Price</th>'+
                          '</thead>'+
                          '<tbody></tbody>'+
                          '</table>');

                        // 2. Loop through all entries
                        var keys = ['title'];
                        data.forEach(function(row) {
                          var $row = $('<tr />');

                          $row.append('<td class="text-center" width="50"><label class="switch switch-small"><input type="checkbox" /><span><input class="form-control" type="text" name="optionID[]" value="'+row['id']+'"></span></label></td>');
                          keys.forEach(function(key) {
                            $row.append('<td>' + row[key] + '</td>');
                          });
                          $row.append('<td class="text-center"><input class="form-control" placeholder="if fill this price, the price will add to product price when user select it." type="number" name="optionPRICE[]"></td>');

                          $('#table tbody').append($row);
                        });
                    }
                });
            }else{
                $('div.options').empty();
            }
        });
    });
</script>

Any idea?

Answer 1

First you need to build your table once. But you are appending new tables every success call. That happens in the line:

$('div.options').append('<div class="mb-20">...

That append is actually creating the table and appending it to the div.

Instead you should create the table only one time before the success callback, then just update it with the new data.

$(function(){
    var updateTable =  function() {
        var addressID = $(this).val();
        var data = JSON.parse(addressID);
        
        // show the table div
        $('div.options').show();

        // clear old rows
        $('tbody', myTable).empty();

        // 2. Loop through all entries
        var keys = ['title'];
        data.forEach(function(row) {
          var $row = $('<tr />');
          $row.append('<td class="text-center" width="50"><label class="switch switch-small"><input type="checkbox" /><span><input class="form-control" type="text" name="optionID[]" value="'+row+'"></span></label></td>');

          keys.forEach(function(key) {
            $row.append('<td>' + row[key] + '</td>');
          });
          $row.append('<td class="text-center"><input class="form-control" placeholder="if fill this price, the price will add to product price when user select it." type="number" name="optionPRICE[]"></td>');

          $('tbody', myTable).append($row);
        });
    };
    
    // create and save table for later manipulations
    var myTable = $('<table class="table table-bordered table-hover table-responsive">'+
                      '<thead>'+
                        '<th width="50" class="text-center">Check</th>'+
                        '<th class="text-center">Title</th>'+
                        '<th class="text-center">Price</th>'+
                      '</thead>'+
                      '<tbody></tbody>'+
                      '</table>');
   // append h4
   $('div.options').append('<div class="mb-20"><h4>Check mark your needed options only</h4></div>');
   // append the table
   $('div.options').append(myTable);
   // select event
   $('select[name="options"]').on('change', updateTable);
   updateTable.call($('select[name="options"]').first());
});

{"d":4,"e":5,"f": 6}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="options">
  <option value="[1,2,3]">Data1</option>
  <option value="[4,5,6]">Data2</option>
</select>
<div class="options"></div>

Answer 2

Here are the steps to take:

1. Remove the $('div.options').append( ... ) call

2. Add the following HTML to your static div element, and hide it with style="display:none":

   <div class="mt-20 options" style="display:none">
       <div class="mb-20"><h4>Check mark your needed options only</h4></div>
       <table id="table" class="table table-bordered table-hover table-responsive">
           <thead>
               <th width="50" class="text-center">Check</th>
               <th class="text-center">Title</th>
               <th class="text-center">Price</th>
           </thead>
           <tbody>
           </tbody>
       </table>
   </div>
   

3. Add code after the data.forEach loop, to unhide the div:

       $('#table tbody').append($row);
   }); // end of loop
   $("div.options").show();  // <---