JSFiddle - React, Tailwind, and code Playground
HTML
<div id="dvContainer" >
</div>
CSS
#dvContainer {
width: 800px;
margin-bottom: 10px;
border: 1px solid orange;
}
label {
display: inline-block;
width: 200px
}
JavaScript
var handles = ['Duckbilled Platypus', 'Eagle', 'Fox', 'Goose', 'Hyena', 'Iguana', 'Jaguar'];
$( document ).ready(function() {
$.fn.extend({
appendCheckboxes: function(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'
}).val(value),
label
).appendTo(container);
});
}
});
});
$('#dvContainer').appendCheckboxes(handles);