JSFiddle - React, Tailwind, and code Playground

by Akram kamal

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><p>I\'m collapsible number ' + i + '</p>'))
            .appendTo('#primary');
    }
    $('#makecollapsible').collapsibleset().trigger('create');
}