JSFiddle - React, Tailwind, and code Playground

HTML

<script type='text/template' data-template='item'>

<ul class="clonedSection">
    <li style="list-style-type: none;">
        <label>
            <input class="main-item" type="checkbox" />First Item</label>
        <ul class="sub-item" style="display: none;">
            <li style="list-style-type: none;">
                <label>
                    <input type="checkbox" />Sub Item</label>
            </li>
        </ul>
    </li>
    <li style="list-style-type: none;">
        <label>
            <input class="main-item" type="checkbox" />Second Item</label>
        <ul class="sub-item" style='display: none;'>
            <li style="list-style-type: none;">How many items:
                <select class="medium" required>
                    <option value="">---Select---</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                </select>
            </li>
            <li style="list-style-type: none;">
                <div></div>
            </li>
        </ul>
    </li>
</ul>
    </script>

JavaScript

var template;

    function renderItem() {
        template = template || $("[data-template=item]").html();
        var el = $("<div></div>").html(template);
        return el; // a new element with the template
    }

    for (var i = 0; i < 3; i++) {
        var el = renderItem();
        $("body").append(el);
    }