动态生成Select的显示隐藏问题：仅首个Select可切换

你的问题核心是重复使用了相同的id属性——HTML规范里id必须是页面唯一的，所以你绑定的点击事件只会作用到第一个匹配#atb11的元素上，其他组件自然没反应。

下面是具体的修复方案，直接改代码就行：

1. 替换重复的id为class #

生成HTML模板时，把原本的id="atb11"和id="atbb22"换成class，保证每个模块的元素能被独立定位：

linha += `<div class="col-3">
             <label class="toggle-select-label" style="margin-top: 5%;"><i class="pe-2x pe-va pe-7s-plus"></i> Ajudante</label>
             <div class="toggle-select-container" 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>`;

2. 用事件委托绑定点击事件，定位对应容器 #

因为是动态生成的元素，直接绑定事件会失效，需要用事件委托到静态父元素，然后通过DOM遍历找到当前点击标签对应的容器：

// 把原来的$('#atb11').on(...)删掉，换成下面的事件委托
$(document).on('click', '.toggle-select-label', function() {
  // 找到当前点击标签的兄弟容器（也就是对应的Select所在的div）
  $(this).next('.toggle-select-container').slideToggle('slow');
});

3. 优化代码性能 #

原来的循环里每次都执行$(".pagmfalta").html(linha)和Select2初始化，会重复操作DOM和初始化组件，把这些操作移到循环外面：

$(document).on('click', '.dad-pagamento', function() {
  var linha = ``;
  for (var x = 0; x < data.length; x++) {
    linha += `<div class="col-3">
                 <label class="toggle-select-label" style="margin-top: 5%;"><i class="pe-2x pe-va pe-7s-plus"></i> Ajudante</label>
                 <div class="toggle-select-container" 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>`;
  }
  // 循环结束后再更新DOM，只操作一次
  $(".pagmfalta").html(linha);
  $('#minhaDiv1').show();
  
  // 一次性初始化所有新生成的Select2组件
  $(".singlet").select2({
    placeholder: "Selecione Ajudante",
    allowClear: true,
    width: '100%'
  });
});

完整修改后的代码 #

JavaScript部分 #

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 class="toggle-select-label" style="margin-top: 5%;"><i class="pe-2x pe-va pe-7s-plus"></i> Ajudante</label>
                 <div class="toggle-select-container" 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', '.toggle-select-label', function() {
  $(this).next('.toggle-select-container').slideToggle('slow');
});

HTML部分（无需修改） #

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

这样修改后，每个标签点击只会切换自己对应的Select容器，不会影响其他组件，同时代码性能也更优。

内容的提问来源于stack exchange，提问作者Bruno