JSFiddle - React, Tailwind, and code Playground

HTML

<div id="popupfoot">
    <p id="survey_title"></p>
     <h5 id="choose"></h5>

    <div id="survey_question"></div>
</div>

CSS

.pbar {
    background:#444;
    width:100%;
    height:5px;
    border-radius:10px;
    display:none;
}
.pbarinner {
    background:#0CF;
    width:100%;
    height:5px;
    border-radius:100px;
    box-shadow:0 3px 7px rgba(0, 0, 0, .25);
    margin-top:5px;

}

JavaScript

var PG = {
    divid: "",
    multiselection: "",
    optionitem: [],
    init: function (divid, multiselection, optionitem) {
        PG.divid = divid;
        PG.multiselect = multiselection;
        PG.optionitem = optionitem;

    },
    test: function () {
        for (var i = 0; PG.optionitem.length > i; i++) {
            alert(PG.optionitem[i].name);
        }
    },

    render_1: function () {
        $.each(array, function (i, obj) {

            var selection = "<input class='the_checkbox' type='checkbox' id=" + obj.value + " name=" + obj.name + " value=" + obj.value + ">" +
                "<label class='label' for=" + obj.value + ">" + obj.value + "</label>" +
                "<div class='pbar'><div class='pbarinner' style='width:75%;'></div></div>";

            $("#" + PG.divid).append(selection);
                    if ($('input#'+obj.value).is(':checked')) {
                        $('.pbar').css('display','block');
                    }


        });



        $("#survey_title").append("What is your favorite fruit??");
        $("#choose").append("Please select 1 fruit only:");

        $('.the_checkbox').on('change', function (evt) {
            if ($(this).siblings(':checked').length >= PG.multiselect) {
                this.checked = false;
            }
        });



    },
    render_2: function () {
        $.each(w_array, function (i, obj) {
            var selection = "<input class='the_checkbox' type='checkbox' id=" + obj.value + " name=" + obj.name + " value=" + obj.value + ">" +
                "<label class='label' for=" + obj.value + ">" + obj.value + "</label>";


            $("#" + PG.divid).append(selection);

        });

        $("#survey_title").append("item??");
        $("#choose").append("Please select 3 item :");

        $('.the_checkbox').on('change', function (evt) {
            if ($(this).siblings(':checked').length >= PG.multiselect) {
                this.checked = false;
            }
        });



    },
   ...