JSFiddle - React, Tailwind, and code Playground

by clayshannon

HTML

<div id="container1"></div>
<div id="container2"></div>

CSS

#container1, #container2 { width: 400px; margin-bottom: 10px; border: 1px solid black; }
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',{
    'Apple':1,'Banana':2,
    'Cranberry':3,'Dill':4
});