JSFiddle - React, Tailwind, and code Playground

by Tenderfeel

CSS

ul{
    overflow:hidden;
}

li {
    float:left;
    padding:5px;
}

label {
    padding:3px;
}
where ul = new Element ('ul'); ul.inject (document.body);

JavaScript

var word = [
         ['!','"','#','$','%','&',"'",'(',')','*','+',',','-','.','/'],
         [':',';','<','=','>','?','@'],
         ['[','\\',']','^','_','`'],
         ['{','|','}','~'],
    ];


word.each(function(arr, g){ 
    var ul = new Element('ul',{'id':'group-'+g});
    ul.inject(document.body);
    
    arr.each(function(el, i){
        var li = new Element('li');
        var label = new Element('label', {'html':el, 'for':'word-'+i});
        var checkbox = new Element('input', {'type':'checkbox', 'value':i, 'name':'w', 'id':'word-'+g+'-'+i});
       
        li.grab(checkbox).grab(label); 
        li.inject(ul);
    });
});