JSFiddle - React, Tailwind, and code Playground

by Martin Murciego

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
                    <div class="repeater repeater-wrap">
                        <div data-repeater-list="reservas" class="repeatable">
                            <div class="accordion" id="accordionEspacios" role="tablist" aria-multiselectable="true">
                                <div class="repeater-item" data-repeater-item="">
                <div class="panel">
                    <a class="panel-heading collapsed" role="tab" id="headingOne1" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne1" aria-expanded="false" aria-controls="collapseOne">
                        <h4 class="panel-title">Collapsible Group Item #1</h4>
                    </a>
                    <div id="collapseOne1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne" aria-expanded="false" style="height: 0px;">
                        <div class="panel-body">
                            <p><strong>Collapsible Item 2 data</strong>
                            </p>
                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
                        </div>
                    </div>
                </div>
                <input data-repeater-delete type="button" value="Delete" />                                
</div><!-- data-repeater-item-->
                            </div>
                        </div><!-- data-repeater-list-->
                        <!-- Boton...

JavaScript

$(document).ready(function() {
            $('.repeater').repeater({
                initEmpty: false,
                defaultValues: {},
                show: function() { //al agregar item con .slideDown()
                    var selfRepeaterItem = this;
                    $(selfRepeaterItem).slideDown();

                    var repeaterItems = $("div[data-repeater-item]");
                    $(selfRepeaterItem).attr('data-index', repeaterItems.length - 1);
                    $(selfRepeaterItem).find('a  h4 span.repeaterItemNumber').text(repeaterItems.length);
                    var aheadingItemId = '#headingItem' + repeaterItems.length;

                    // if (repeaterItems.length > 1) 
                    //     $(this).prepend('<hr />');

                    $("#headingEspacios > h4 > span i.repeaterItemCounter").text(repeaterItems.length);
                    $("#headingEspacios > h4 > span i.repeaterItemCounter").attr('title', 'Espacio(s) reservado(s): ' + repeaterItems.length);

                    var cargarRepeatedSelect2 = async function () {
                        //inicializarSelect2("[name *='reservas'][");

                        //Espacios de Reunion
                        var espacioControls = $("[name *='reservas'][name *='[espacio]']");

                        var lastIndex = espacioControls.length - 1;
                        var controlEspacio = "[name='reservas[" + lastIndex + "][espacio]'";
                        //inicializarSelect2(controlEspacio);
                        console.log('controlEspacio: ', controlEspacio);
                        var fr1 = await cargarSelect2Espacios(controlEspacio);

                        //Formatos de Evento
                        var formatoControls = $("[name *='reservas'][name *='[formatoEvento]']");
                        var lastIndex = formatoControls.length - 1;
                        var controlFormato = "[name='reservas[" + lastIndex + "][formatoEvento]'";
                      ...