JSFiddle - React, Tailwind, and code Playground

by Anil Kumar

HTML

<body>
    <div class="container">
        <input type="button" id="addCB" value="Add Checkbox" />
        <div id="cbList" class="checkBoxArea">
            <input type="checkbox" value="One" id="cb1" class="checkBox" />
            <label for="cb1">One</label>
            <input type="checkbox" value="Two" id="cb2" class="checkBox" />
            <label for="cb2">Two</label>
            <input type="checkbox" value="Three" id="cb3" class="checkBox" />
            <label for="cb3">Three</label>
            <input type="checkbox" value="Four" id="cb4" class="checkBox" />
            <label for="cb4">Four</label>
        </div>
    </div>
</body>
<div class="dialogueBox">
    <input type="text" id="valueCB" placeholder="please give name of checkbox" />
    <input type="button" value="Save" id="save" />
</div>

CSS

.container {
            width: 100%;
            float: left;
        }
        button, label {
            float: left;
        }
        .dialogueBox {
            border: 1px solid;
            display: none;
            float: left;
            margin-top: 2%;
            padding: 25px;
        }
        .checkBox {
            clear: both;
            float: left;
        }
        .container > input {
            float: left;
        }
        .checkBoxArea {
            float: left;
            width: 100%;
        }
        .dialogueBox > input {
            margin-bottom: 15px;
            width: 100%;
        }

JavaScript

$(document).ready(function () {
    
    $(document).on('click','.checkBox', function () {
        if ($('.checkBox').is(':checked')) {
            alert($(this).val())
        }
    });
    
    function addCheckbox(name) {
        var container = $('#cbList');
        var inputs = container.find('input');
        var id = inputs.length + 1;

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


    $('#save').click(function () {
        addCheckbox($('#valueCB').val());
    });
    $('#save').click(function () {
        $('.dialogueBox').hide()
        $('#valueCB').val('')
    });
    $('#addCB').click(function () {
        $('.dialogueBox').show()
    });
    
 

})