JSFiddle - React, Tailwind, and code Playground

by Justin

HTML

<table id ="newKey" class="w600 text" style="border:1px solid #F15022; border-collapse:collapse;">
    
    <tr id="titlerow" class="titlerow head">
        <th class="w50 left">Include?</th>
        <th class="w125">Field</th>
    </tr>

    <tr style="border-bottom: 1px solid #aaa">
        <td class="w50"><input type="checkbox" value="benchid" /></td>
        <td class="w125"><span class="black">benchid</span></td>
    </tr>
    
    <tr style="border-bottom: 1px solid #aaa">
        <td class="w50"><input type="checkbox" value="rsid"/></td>
        <td class="w125"><span class="black">rsid</span></td>
    </tr>
    
    <tr style="border-bottom: 1px solid #aaa">
        <td class="w50"><input type="checkbox" value="site" /></td>
        <td class="w125"><span class="black">site</span></td>
    </tr>
</table>

<div id="results">

</div>

JavaScript

var fields = [];
    $('#newKey').change(function(event) {
    $('input[type="checkbox"]:checked').each(function(index){
        field = [];
        field.push($(this).val());
        field.push($(this).attr('data-key'));
        field.push($(this).attr('data-null'));
        field.push($(this).attr('data-default'));
        field.push($(this).attr('data-type'));
        field.push($(this).attr('data-extra'));
        fields.push(field);
    })
   
    limit = fields.length;
    result = "";

    for (var i = limit - 1; i >= 0; i--) {
        string = '<input type="text" name="' + fields[i][0] + '" />\n\n'
        result += string;
    };

    $('#results').text(result);
    
    })