JSFiddle - React, Tailwind, and code Playground

by Chris Ivey

HTML

<!--<button id="target" type="button">Click Me</button>
<div id="output">10</div>-->
<input type="hidden" id="ccnt" value="0">
<table class="table" id="retc">
    <tr>
        <th class="th">Entry #</th>
        <th class="th">HIPPY Year</th>
        <th class="th">Week/Packet</th>
        <th class="th">Quantity</th>
    </tr>
    <tbody></tbody>
</table>
<input type="button" value="Add Curriculum To Return" class="button" id="addcurric">

JavaScript

$('#ccnt').data('count', 0);
$('#addcurric').click(function () {
    function getcount() {
        var $this = $('#ccnt'),
            count = $this.data('count') + 1;

        $this.data('count', count);
        return count;
    }

    var mycount = getcount();
    //console.log('mycount: ' + mycount);

    var tdclass;
    if (mycount % 2 == 1) {
        tdclass = "td1";
    } else {
        tdclass = "td2";
    }
    //console.log('tdclass: ' + tdclass);
    //window.alert(mycount + ' ' + tdclass);

    var chtml = "";
    chtml += "'<tr>";
    chtml += "    <td class=\"" + tdclass + "\">" + mycount + "</td>\\n";
    chtml += "    <td class=\"" + tdclass + "\"><select name=\"HYear" + mycount + "\" id=\"hyear" + mycount + "\">\\n";
    chtml += "        <option value=\"0\">-- Select --</option>\\n";
    chtml += "        <option value=\"1\">Year 1</option>\\n";
    chtml += "        <option value=\"2\">Year 2</option>\\n";
    chtml += "        <option value=\"3\">Year 3</option>\\n";
    chtml += "    </select></td>\\n";
    chtml += "    <td class=\"" + tdclass + "\"><select name=\"Week" + mycount + "\" id=\"week" + mycount + "\">\\n";
    chtml += "        <option value=\"0\">-- Select --</option>\\n";
    chtml += "        <option value=\"1\">Year 1</option>\\n";
    chtml += "        <option value=\"2\">Year 2</option>\\n";
    chtml += "        <option value=\"3\">Year 3</option>\\n";
    chtml += "    </select></td>\\n";
    chtml += "    <td class=\"" + tdclass + "\"><input type=\"text\"  name=\"qty" + mycount + "\" class=\"input\"></td>\\n";
    chtml += " </tr>\\n'";

    //console.log('chtml is: ' + chtml);
    //window.alert(chtml);
    //console.log("Writing an iteration of chtml to scrren...");
    $('#retc > tbody').append(chtml);
});