Show and hide select dynamically

Question

I return my select dynamically. I use the following code:

var data = [
   {Id: "1", },
   {Id: "2", },
   {Id: "3", },
   {Id: "4", },
   {Id: "5", },
   {Id: "6", },
];

$(document).on('click', '.dad-pagamento', function() {

  var linha = ``;
  for (var x = 0; x < data.length; x++) {

   linha += `<div class="col-3">
               <label id="atb11" style="margin-top: 5%;"><i class="pe-2x pe-va pe-7s-plus"></i> Ajudante</label>
               <div id="atbb22" style="display:none;">
                 <select class="js-states form-control ajuste singlet" name="auxiliar[]">
                   <option></option>
                   <option value="${data[x].Id}">${data[x].Id}</option>
                 </select>
               </div>
             </div>`;
   
   $(".pagmfalta").html(linha);
   $('#minhaDiv1').show();
   
   $(".singlet").select2({
    placeholder: "Selecione Ajudante",
    allowClear: true,
    width: '100%'
   });

   $('#atb11').on('click', function() {
    $('#atbb22').slideToggle('slow');
   });
  
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/pixeden-stroke-7-icon@1.2.3/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<button type="button" class="btn btn-info dad-pagamento" style="float: right; margin-right: 5%; margin-top: 4%;"><i class="metismenu-icon pe-7s-search"></i> Consultar </button>

<section id="s1">
  <div style="display:none" id="minhaDiv1">
        <div class="row pagmfalta">

        </div>
  </div>
</section>

I use this code to show and hide the select:

$('#atb11').on('click', function() {
 $('#atbb22').slideToggle('slow');
});

The problem as it returns more than one select and I am using id, it only opens the first select and not the others.

I intend to open select one by one according to my needs. I don't want to click on a select and they all open

You are having same `id` for multiple elements, you can create dynamic id like add `x` variable in id of div — Ahmed Ali, Jan 26 '23 at 12:11
@Ahmed Ali The ids look like this `id="atb11${x}" and id="atbb22${x}"`, but how does this code look? `$('#atb11').on('click', function() {$('#atbb22').slideToggle('slow');});` — Anónimo, Jan 26 '23 at 12:20

Ahmed Ali · Accepted Answer · 2023-01-27T17:42:56.180

As I mentioned in the comments, you have some id for multiple elements. You have to append the index variable x with id to make ids unique for each element.
Secondly, add .on(click) that delegates the event for both current and future elements.
check: This answer
See the working example below:

var data = [
   {Id: "1", },
   {Id: "2", },
   {Id: "3", },
   {Id: "4", },
   {Id: "5", },
   {Id: "6", },
];

$(document).on('click', '.dad-pagamento', function() {
  var linha = ``;
  for (var x = 0; x < data.length; x++) {
    linha += `<div class="col-3">
                 <label id="atb11-${x}" style="margin-top: 5%;"><i class="pe-2x pe-va pe-7s-plus"></i> Ajudante</label>
                 <div id="atbb22-${x}" style="display:none;">
                   <select class="js-states form-control ajuste singlet" name="auxiliar[]">
                     <option></option>
                     <option value="${data[x].Id}">${data[x].Id}</option>
                   </select>
                 </div>
               </div>`;

    $(".pagmfalta").html(linha);
    $('#minhaDiv1').show();

    $(".singlet").select2({
     placeholder: "Selecione Ajudante",
     allowClear: true,
     width: '100%'
    });

    $(document).on('click','#atb11-'+x,function(e){

        e.stopImmediatePropagation(); //Keeps the rest of the handlers from being executed 

        $(this).next().slideToggle('slow');
      
    
    });
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/pixeden-stroke-7-icon@1.2.3/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<button type="button" class="btn btn-info dad-pagamento" style="float: right; margin-right: 5%; margin-top: 4%;"><i class="metismenu-icon pe-7s-search"></i> Consultar </button>

<section id="s1">
  <div style="display:none" id="minhaDiv1">
        <div class="row pagmfalta">
        </div>
  </div>
</section>

The issue you mentioned in comments ( .on() is triggering event multiple times) can be solved by adding event.stopImmediatePropagation().
Check docs, It will stops rest of the handlers from being executed.

I am using your solution but I have a problem with it. If I enter the page and it doesn't exit, it works fine, but if I enter, I go back to the previous step and re-enter, when I click on the select it opens and closes automatically, because it saved the event of the previous access. Can you help solve? — Anónimo, Jan 27 '23 at 17:12
@Anónimo Fixed it and also added a little bit of explanation. — Ahmed Ali, Jan 27 '23 at 17:43

Show and hide select dynamically

1 Answers1