JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main-panel">
    <ul id="pq_entry_1" class="clonedSection">
        <li>
            <input id="main_item_1" class='main-item' name="main_item_1" type="checkbox" />
            <label>Main Item</label>
        </li>
        <ul class="sub-item" style='display: none;'>
            <li>
                <input id="sub_item_1" name="sub_item_1" type="checkbox" />
                <label>Sub Item</label>
            </li>
        </ul>
        <li>
            <input id="other_item_1" name="other_item_1" type="checkbox" />
            <label>Other Item</label>
        </li>
    </ul>
    <center>
        <input type='button' class="button tiny radius" id='btnAdd' value='Add Another' />
        <input type='button' class="button tiny radius alert" id='btnDel' value='Delete Last' />
    </center>
</div>

CSS

#main-panel li {
    list-style-type: none;
}

JavaScript

$(document).ready(function () {
    $('#main-panel').on('click', '.main-item', function () {
        var $mainItem = $(this);
        var $subItem = $mainItem.parent().next('.sub-item');
        if ($mainItem.is(':checked')) {
            $subItem.show();
        } else {
            $subItem.hide();
        }
    });
    $('#btnAdd').click(function () {
        var num = $('.clonedSection').length;
        var newNum = num + 1;

        var newSection = $('#pq_entry_' + num).clone().attr('id', 'pq_entry_' + newNum);
        newSection.find('input[type="text"]').val('');
        newSection.find('input[type="checkbox"]').prop('checked', false);
       
        newSection.find('input[type="checkbox"]').each(function() {
            var oldId = $(this).attr('id'),
                newId = oldId.replace(/\d+$/,newNum);
            $(this).attr('id',newId).attr('name',newId).attr('placeholer', 'Item #' + newNum + ' Name');
        });
        
        newSection.find('.sub-item').hide();
        
        newSection.insertAfter('#pq_entry_' + num).last();

        $('#btnDel').prop('disabled', '');

        if (newNum == 10) $('#btnAdd').prop('disabled', 'disabled');
    });

    $('#btnDel').click(function () {
        var num = $('.clonedSection').length; // how many "duplicatable" input fields we currently have
        $('#pq_entry_' + num).remove(); // remove the last element

        // enable the "add" button
        $('#btnAdd').prop('disabled', '');

        // if only one element remains, disable the "remove" button
        if (num - 1 == 1) $('#btnDel').prop('disabled', 'disabled');
    });
});


$('#btnDel').prop('disabled', 'disabled');