someone can help me ? I need to get ids of each new select added inside my collection ,

    const collectionHolder = document.querySelector(e.currentTarget.dataset.collection);

    const item = document.createElement("div");
    item.classList.add("appoint");
   
    item.innerHTML = collectionHolder
        .dataset
        .prototype
        .replace(
        /__name__/g,
        collectionHolder.dataset.index
        );
    
    item.querySelector(".btn-remove").addEventListener("click", () => item.remove());

    collectionHolder.appendChild(item);

    collectionHolder.dataset.index  ;
   
    var elements = $(document).find('select.profs_Select');
    for (var i = 0, l = elements.length; i < l; i  ) {
        var $select = $(elements[i]);  
        $select.select2({
            allowClear: false,
            minimumResultsForSearch: 0,
            theme: 'bootstrap',
            width: '100%' // https://github.com/select2/select2/issues/3278
        }); 
    }
    
    var element = $(document).find('select.profs_Select');
    for (var i = 0, l = element.length; i < l; i  ) {
        var select = $(element[i]); 
        console.log(select);
        select.change(function(e) {                
            var $form = $(this).closest('form');
            var data = {};
            data[select.attr('name')] = select.val();
            // On soumet les données
            $.ajax({
                url : $form.attr('action'),
                type: $form.attr('method'),
                data : data,
                complete: function(html) {
                    
                    $('.time_Select').replaceWith(
                        $(html.responseText).find('.time_Select')
                        
                    );                  
                }
            });
        });
    }
       
       
    
};

document
.querySelectorAll('.btn-remove')
.forEach(btn => btn.addEventListener("click", (e) => e.currentTarget.closest(".col-4").remove()));

document
.querySelectorAll('.btn-new')
.forEach(btn => btn.addEventListener("click", newItem));

I need to get ids of each new select (.profSelect) and select (.time_Select) added in my collection , and can apply my dynamic event on them. examples id : parents_appoints_0_profs , parents_appoints_1_profs, parents_appoints_2_profs Thanks !!

CodePudding user response：