Dynamically create a matrix of radiobutton from two textbox inputs

Question

I would like to create a matrix of radio buttons based on two arrays one having label and count for rows and another one having label and count for column.

These arrays are obtained from two textboxes, where users enters texts separated by semicolon:

<input type="text" name="criteria" id="criteria" class="Textbox autobox default" value="row1;row2;row3;row4" autocomplete="off">
<input type="text" name="levels" id="levels" class="Textbox autobox default" value="level1;level2;level3;level4;level5" autocomplete="off">

Then I tried to create radio buttons dynamically for a row using:

var array1 = $('#criteria').val().split(";");
var array2 = $('#levels').val().split(";");

for (j = 0; j < array2.length; j++) {
for (i = 0; i < array1.length; i++) {
   var radioBtn = $('<input type="radio" name="rbtnCount" />');
   radioBtn.appendTo('#matrix');


}
$('#matrix').append("<br/>"); 
}

I manage to produce rows of radio buttons but I could not get for each new row as new group and with labels.

I expected a matrix of radio buttons like in the following figure:

Users should be able to select one in each row therefore each row is in different groupings so that selection in one row does not affect other.

Answer 1

Different row wise groupings can be made by setting same name for every radio element in that row. In the following snippet, names of radio buttons are set from the criteria array elements.

The id for every radio button should be unique, hence a combination of row and column iterators can be made to set up their ids (eg '00','01','02', etc.).

It is advised not to make too many DOM update calls by using element.append() inside loops. Instead, you can form your entire HTML string and append it at the very end of your script.

 $('#criteria').change(function() { updateMatrix(); }); $('#levels').change(function() { updateMatrix(); }); updateMatrix(); function updateMatrix() { var innerHTML = ""; var criterias = $('#criteria').val().split(";"); var levels = $('#levels').val().split(";"); $.each(criterias, function(i) { if (i === 0) { innerHTML += "<tr><th></th>"; $.each(levels, function(j) { innerHTML += `<th> ${levels[j]} </th>`; }); innerHTML += "</tr>"; } innerHTML += "<tr>"; $.each(levels, function(j) { if (j === 0) innerHTML += `<td> ${criterias[i]} </td>`; innerHTML += `<td><input type="radio" name="${criterias[i]}" id="${i}${j}"></td>`; }); innerHTML += "</tr>"; }); $('#matrix').html(innerHTML); } 

 body { font-family: Arial, Helvetica, sans-serif; } div { margin-bottom: 10px; } .text-label { display: block; text-transform: uppercase; font-size: 12px; font-weight: bold; padding: 3px 5px; } .textbox { padding: 10px; width: 300px; } table { border-collapse: collapse; text-transform: uppercase; font-size: 10px; border: 1px solid #333; margin-top: 20px; } table input { display: block; margin: 0 auto; } th, td { text-align: left; padding: 10px 20px; } th { background-color: #333; color: white; } tr:nth-child(even) { background-color: #f2f2f2; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <span class="text-label">Criteria</span> <input class="textbox" type="text" name="criteria" id="criteria" value="row1;row2;row3;row4" autocomplete="off"> </div> <div> <span class="text-label">Levels</span> <input class="textbox" type="text" name="levels" id="levels" value="level1;level2;level3;level4;level5" autocomplete="off"> </div> <table id="matrix"> </table>