Show and hide select dynamically-CodePudding

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 >
               <label id="atb11" style="margin-top: 5%;"><i ></i> Ajudante</label>
               <div id="atbb22" style="display:none;">
                 <select  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/[email protected]/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"  style="float: right; margin-right: 5%; margin-top: 4%;"><i ></i> Consultar </button>

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

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

CodePudding user response：

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 >
                 <label id="atb11-${x}" style="margin-top: 5%;"><i ></i> Ajudante</label>
                 <div id="atbb22-${x}" style="display:none;">
                   <select  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(){
      $(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/[email protected]/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"  style="float: right; margin-right: 5%; margin-top: 4%;"><i ></i> Consultar </button>

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