var $collectionHolder; 

var $addNewItem = $('<a href="#" class="btn btn-info">Ajouter frères et soeurs</a>');



$(document).ready(function(){

    $collectionHolder = $('#frsr_list');

    $collectionHolder.append($addNewItem);

    $collectionHolder.data('index',$collectionHolder.find('.panel').length);



    $collectionHolder.find('.panel').each(function(){
    addRemoveButton($(this));

  

});

$addNewItem.click(function(e){
    e.preventDefault();
    addNewForm();
    
})

});

function addNewForm(){
    var prototype = $collectionHolder.data('prototype');

    var index = $collectionHolder.data('index');
    console.log(index);
    var newForm = prototype;
    newForm = newForm.replace(/__name__/g, index);

    $collectionHolder.data('index', ++index);
    
    var $panel = $('<div class="panel panel-warning"><div class="panel-heading"></div></div>');

    var $panelBody = $('<div class="panel-body"></div>').append(newForm);
    
    $panel.append($panelBody);
    addRemoveButton($panel);

    $addNewItem.before($panel);

    

    for (var id = 0; id <= 100; id++) {
        var myDiv = document.getElementById('MembreType_freressoeurs_'+id);
        myDiv.classList.add("d-flex");
        myDiv.classList.add("flex-column");
        myDiv.classList.add("flex-md-row");
        myDiv.classList.add("gap-5");
   }




}

function addRemoveButton($panel){
    
    var $removeButton = $('<a href="#" class="btn btn-danger">Supprimer</a>');


    var $panelFooter = $('<div class="panel-footer"></div>').append($removeButton);

    $removeButton.click(function(e){
        e.preventDefault();
        $(e.target).parents('.panel').slideUp(1000, function(){
            $(this).remove();
        
        })

    });
    $panel.append($panelFooter);



}

