JSFiddle - React, Tailwind, and code Playground

by AdiT

HTML

<div id="cblist">
        
    </div>
    
    <input type="text" id="checkBoxName" />
    <input type="button" value="ok" id="btnSaveCheckBox" />
    <div id="progressbar"></div> <br/>

JavaScript

$(document).ready(function() {
    $('#btnSaveCheckBox').click(function() {
        addCheckbox($('#checkBoxName').val());
        $('#checkBoxName').val("");
    });
    
    $(function () {
            $("#progressbar").progressbar({
                value: 0,
                max: 100
            });
        
        });
});

function addCheckbox(name) {
   var container = $('#cblist');
   var inputs = container.find('input');
   var id = inputs.length+1;

   $('<input />', { type: 'checkbox', id: 'cb'+id, value: name }).appendTo(container);
   $('<label />', { 'for': 'cb'+id, text: name }).appendTo(container);
   $('<br/>').appendTo(container);
}