JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript">
 function populate() {

var abc = [1,2,3];
    var  CountSelectedCB = new Array();
var s1 = document.getElementById('demo');
    for (var option in abc) {
    if (abc.hasOwnProperty(option)&&!document.getElementById('CheckBox'+abc[option])) {
            var pair = abc[option];
            var checkbox = document.createElement("input");
            checkbox.type = "checkbox";
            checkbox.id = 'CheckBox'+pair;
            checkbox.name = pair;
            checkbox.value = pair;
            s1.appendChild(checkbox);

            var label = document.createElement('label')
            label.htmlFor = pair;
            label.appendChild(document.createTextNode(pair));
            s1.appendChild(label);
            s1.appendChild(document.createElement("br")); 
            }
    }
}


function displayCheckbox(){    
    $("input:checkbox").change(function() {          
        selectedCB = [];
        notSelectedCB = [];
        $("input:checkbox").each(function() {
            if ($(this).is(":checked")) {
                CountSelectedCB[0] = $(this).attr("id");
            }
        });
        $('input[name=selectedCB]').val(CountSelectedCB); 
    });
}     
    
</script>
</head>
<body>
  Show checkboxes
<div id="demo" onload="populate('demo')"></div>
    <button onclick="populate()" >abc </button>
      <input type="text" name="selectedCB"/>  
</body>