JSFiddle - React, Tailwind, and code Playground

by smithfoto

HTML

<div style="margin-bottom:25px;">
    <button class="add_section btn btn-primary" type="button"><i class="fa fa-plus"></i> Add Section</button>
</div>

<div class="panel clone" id="primary">
    <div class="panel-heading">
        <span class="panel-title" id="secPanel">Section #Primary</span>
        <button style="float:right;" class="rem_section btn btn-primary" type="button"><i class="fa fa-remove"></i>Remove Section</button>
    </div>
    <div class="panel-body admin-form">
        <div class="form-horizontal">
            <div class="form-group">
                <label class="col-lg-2 control-label">Description</label>
                <div class="col-lg-8">
                    <input id="secTitle" name="txt_sectitle[]" value="" type="text" class="form-control">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="pastclone"></div>

JavaScript

jQuery(document).ready(function() {
    // Init jQuery Add Section
    $('.add_section').on('click', function(){
        var	num = $('div.clone').length,
            clone = $('#primary').clone().attr('id', num);
        
        clone.find('#secPanel').html('Section #' + num);
        clone.find('[type=text]').val('');
        clone.find('.rem_section').attr('class', 'rem_section'+num+' btn btn-primary');
        clone.insertBefore("#pastclone");
        return false;	
    });
    
    // Init jQuery Remove Section
    $(".clone").on("click", ".rem_section", function(){
        $(this).parent(".clone").remove(); 
        return false;	
    });    
});