オプションの選択に基づいてデータが追加されるテーブルがあります。問題は、データを複数回追加しないようにすることです。

オプションcolorデータの追加を選択sizeしてから、これまでのところオプションデータの追加も選択するとします。

しかし、もう一度間違って選択colorした場合は。カラーデータが再び表示されます。これは基本的に、これらのデータをバックエンドで送信したい瞬間まで問題はありません。同じIDを異なる値でフィルタリングするのは困難です。

質問は

この重複した追加を回避する方法はありますか？では、1color回選択すると、データは1回だけ表示され、2回目は表示されませんか？

コード

HTML

<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>

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();



                        // 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);
                        });
                        $("div.options").show();
                    }
                });
            }else{
                $('div.options').empty();
            }
        });
    });
</script>

それについて何か考えはありますか？