JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="page" id="practice">
        <div data-role="header">
            <h2>Playground</h2>
        </div>
        <div data-role="content">
            <div data-role="button" id="addprimary" data-inline="true">Add 5</div>
            <div data-role="collapsible">             
                <h4>Collapsible</h4> 
                <form id="makecollapsible">
                </form>
            </div>
        </div>
        <div data-role="footer">
            <h4>Please, no applause</h4>
        </div>
    </div>

JavaScript

$('#addprimary').on('click', function () {
        Markup.Collapsible();
    });

var Markup = new Object();

Markup.Collapsible = function () {
    $('#makecollapsible')
    .append($('<div>')
        .attr({ 'data-role': 'collapsible-set', 'id': 'primary' })
     );
    for (i = 0; i < 5; i++) {
        ($('<div>')
             .attr({ 'data-role': 'collapsible', 'data-content-theme': 'c', 'data-collapsed': 'true' })
             .html('<h4>' + i +'</h4>'))
        .appendTo('#primary');
    }
}