JSFiddle - React, Tailwind, and code Playground

HTML

<form id="form1">

</form>

JavaScript

(function(){

var form = document.getElementById('form1');

// accumulator
var data = {};
// callback
var storeData = (name, value, p) => data[name] = value;
// callback as third argument
addCheckBoxItem('data1', 'checkbox1', storeData);
addCheckBoxItem('data2', 'checkbox2', storeData);
addCheckBoxItem('data3', 'checkbox3', storeData);

function addCheckBoxItem(p, name, onChange) {

    // add checkbox
    var newCheckbox = document.createElement("input");
    newCheckbox.type = "checkbox";
    newCheckbox.setAttribute("value", p);
    newCheckbox.setAttribute("id", p);
    newCheckbox.setAttribute("name", name);
    
    newCheckbox.addEventListener('change', function(){ 
      var cbs = document.getElementsByName(name);
      for (var i = 0; i < cbs.length; i++) {
        cbs[i].checked = false;
      }
      this.checked = !this.chec;
      // fire callback
      onChange && onChange(name, this.value, p);
      // check data
      console.log(data);
    });

   form.appendChild(newCheckbox);


    // add label to checkbox
    var label = document.createElement('label');
    label.setAttribute("name", name);
    label.htmlFor = p;
    label.appendChild(document.createTextNode(p));

    form.appendChild(label);

    // add br tag to checkbox 
    var br = document.createElement("br")
    br.setAttribute("name", name);
    form.appendChild(br);

}

})();