JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container1" class="checkboxGroups2Col"></div>
<div id="container2" class="checkboxGroups3Col"></div>
<div id="container3" class="checkboxGroups4Col"></div>
<div id="container4" class="checkboxGroups1Col"></div>
<div id="container5" class="checkboxGroups5Col"></div>
<button id="whatIsSelected"> What is Selected? </button>
<button id="yo">See list</button>

CSS

.checkboxGroups1Col { width: 100px; margin-bottom: 10px; border: 1px solid orange; }
.checkboxGroups2Col { width: 100px; margin-bottom: 10px; border: 1px solid orange; }
.checkboxGroups3Col { width: 600px; margin-bottom: 10px; border: 1px solid orange; }
.checkboxGroups4Col { width: 800px; margin-bottom: 10px; border: 1px solid orange; }
.checkboxGroups5Col { width: 1000px; margin-bottom: 10px; border: 1px solid orange; }
label { display: inline-block; width: 200px; }

JavaScript

(function($){
  $.fn.extend({
    appendCheckboxes: function(name,labels){
      var container = this;
      $.each(labels, function(i,l){
        var label = $.isPlainObject(labels) ? i : l,
            value = $.isPlainObject(labels) ? l : i;
        $('<label>').append(
          $('<input>',{'type':'checkbox','name':name}).val(value),
          label
        ).appendTo(container);
      });
    }
  });
})(jQuery);

$('#container1').appendCheckboxes('foo',['Apple','Banana','Cranberry','Dill']);
$('#container2').appendCheckboxes('bar',{
    'Almond':1,'Blueberry':2,
    'Cherry':3,'Dumpling':4
});
$('#container3').appendCheckboxes('critters',['Armadillo','Baboon','Cheetah','Duckbilled Platypus', 'Eagle', 'Fox', 'Goose', 'Hyena', 'Iguana', 'Jaguar', 'Komodo Dragon', 'Leopard', 'Mountain Lion', 'Northern Flicker', 'Opossum', 'Porpoise', 'Quail', 'Ring-tailed Monkey', 'Sabre-toothed and/or Siberian Tiger', 'Tasmanian Devil', 'Unicorn', 'Vole', 'Woozel (commonly seen with Heffalumps)', 'X-Ray Fish', 'Yellow-bellied Sapsucker', 'Zebra']);
$('#container4').appendCheckboxes('foo',['Apple','Banana','Cranberry','Dill']);
$('#container5').appendCheckboxes('critters',['Armadillo','Baboon','Cheetah','Duckbilled Platypus', 'Eagle', 'Fox', 'Goose', 'Hyena', 'Iguana', 'Jaguar', 'Komodo Dragon', 'Leopard', 'Mountain Lion', 'Northern Flicker', 'Opossum', 'Porpoise', 'Quail', 'Ring-tailed Monkey', 'Sabre-toothed and/or Siberian Tiger', 'Tasmanian Devil', 'Unicorn', 'Vole', 'Woozel (commonly seen with Heffalumps)', 'X-Ray Fish', 'Yellow-bellied Sapsucker', 'Zebra']);

var fooList = '';
$('#whatIsSelected').click(function(){
    fooList=$('foo:checked').map(function(){
        return $(this).parent().text();
    }).get();
    //console.log(list)
    alert(fooList);         
});
var someList = '';
$('checkbox').click(function(){
    alert(this.label);
    alert(this.value);
    someList += this.label;
    alert(someList);
});