JSFiddle - React, Tailwind, and code Playground

by Skooljester

HTML

<div id="test"></div>
<button id="show">Show Answers</button>
<div id="valueTest"></div>
<table>
    <tr>
        <td><input type="text" value=" " data-answer="0" /></td>
        <td><input type="text" value=" " data-answer="1" /></td>
        <td><input type="text" value=" " data-answer="2" /></td>
        <td><input type="text" value=" " data-answer="3" /></td>
        <td><input type="text" value=" " data-answer="4" /></td>
        <td><input type="text" value=" " data-answer="5" /></td>
        <td><input type="text" value=" " data-answer="6" /></td>
    </tr>
    <tr>
        <td><input type="text" value=" " data-answer="0b" /></td>
        <td><input type="text" value=" " data-answer="1b" /></td>
        <td><input type="text" value=" " data-answer="2b" /></td>
        <td><input type="text" value=" " data-answer="3b" /></td>
        <td><input type="text" value=" " data-answer="4b" /></td>
        <td><input type="text" value=" " data-answer="5b" /></td>
        <td><input type="text" value=" " data-answer="6b" /></td>
    </tr>
    <tr>
        <td><input type="text" value=" " data-answer="0c" /></td>
        <td><input type="text" value=" " data-answer="1c" /></td>
        <td><input type="text" value=" " data-answer="2c" /></td>
        <td><input type="text" value=" " data-answer="3c" /></td>
        <td><input type="text" value=" " data-answer="4c" /></td>
        <td><input type="text" value=" " data-answer="5c" /></td>
        <td><input type="text" value=" " data-answer="6c" /></td>
    </tr>
</table>

CSS

.test {
    background:#FF0000;
}
td input {
    width:50px;
}

JavaScript

var trTotal = $("tr").index();
    /*
    $("tr").each(function(){
        var numRand = Math.floor(Math.random()*7);
        $("td", this).eq(numRand).toggleClass("test");
    });
    */
    
$("tr").each(function(){
    var numRand = Math.floor(Math.random()*7);
    var tdData = $("td input", this).eq(numRand).attr("data-answer");
    $("td", this).eq(numRand).text(tdData);
});

$("#show").click(function() {    
    $("td").each(function(){
        var inputData = $("input", this).attr("data-answer");
        $(this).html(inputData);
    });
});