How to used each and push data to array in jquery-CodePudding

How to add data to array ? i have form input with some option and i used button add more for add section form input. I want to make the options that have been selected not displayed in the rest of the index. example :

index 0 i chose G05B-IA1
index 1 i chose G05B-IA2
index 2 i chose G05B-IA3

And I store it in an array. i want got result like this [G05B-IA1,G05B-IA2,G05B-IA3] But, the result i got it is ['G05B-IA2', 'G05B-IA2', 'G05B-IA2']

RESULT

My Jquery Code

  $(document).on('change', '.slot_id', function(){
      cekslotid = $(this).val(); 
      console.log(cekslotid);
  });

  $(document).on('change', '.warehouse2', function(){
      var warehouseid = $(this).val(); 
      let idtarget  = $(this).data('idtarget');
      let cektarget = idtarget - 1;
      let slotid1   = $("#slot_id").val();
      let slotid2   = $("#slot_id" cektarget '').val();
      let data      = [slotid1];

  
  $('.slot_id').each(function() {
    data.push($(cekslotid).val());
  });

  console.log(data);

My HTML in view

<div class="add-more-pallet">
                <div class="row">
                    <div class="col-md-6">
                        <label>Pilih Gudang : </label>
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="fas fa-warehouse"></i></span>
                            </div>
                            <select class="form-control" id="warehouse" required>
                                <option value="">-- Pilih Gudang --</option>
                                @foreach($warehouse as $row)
                                <option value="{{ $row->id_warehouse }}">{{ $row->warehouse_name }}</option>
                                @endforeach
                           </select>
                        </div>
                    </div>
                  <div class="col-md-5">
                        <label>Pilih Pallet : </label>
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="fas fa-pallet"></i></span>
                            </div>
                            <select class="form-control slot_id" id="slot_id" name="slot_id[]" required><option value="">-- Pilih Pallet --</option></select>
                        </div>
                    </div>

My HTML in Jquery

'<div >'   
                        '<label>Pilih Gudang : </label>'  
                        '<div >'  
                          '<div >'  
                            '<span ><i ></i></span>'  
                          '</div>'  
                          '<select  data-idtarget="' i '" required>'  
                            '<option value="">-- Pilih Gudang --</option>'  
                            '<option value="G05B">Gudang 05 B</option>'  
                            '<option value="G09">Gudang 09</option>'  
                          '</select>'  
                        '</div>'  
                      '</div>'  
                      '<div >'   
                        '<label>Pilih Pallet : </label>'  
                        '<div >'  
                          '<div >'  
                            '<span ><i ></i></span>'  
                          '</div>'  
                          '<select id="slot_id' i '"  name="slot_id[' i ']" data-idtarget="' i '" required><option value="">-- Pilih Pallet --</option></select>'  
                        '</div>'  
                      '</div>'

What's wrong with my code ? Why does the value stored in the array become double ?

CodePudding user response：

You are pushing the same value over and over, the one you set here

$(document).on('change', '.slot_id', function(){
  cekslotid = $(this).val(); 
});

Here is a working method

let data = $('.slot_id').map(function() { return this.value }).get();