JSFiddle - React, Tailwind, and code Playground

by Emerson Marini

HTML

<table class="treatments"></table>
<button class="add">Add</button>

JavaScript

var counter = 1;
var categories = {};
categories["a"] = "A";
categories["b"] = "B";
var treatments = {};
treatments["c"] = "C";
treatments["d"] = "D";

$('button.add').click(obj = {
    categories: categories,
    treatments: treatments
}, function () {
    counter++;
    
    var newRow = '<tr><td><label for="category' + counter + '">Category</label></td><td><select id="category' + counter + '" name="category' + counter + '" required="required">';
    
    $.each(obj.categories, function (key, value) {
        $('#category' + counter);
        newRow += '<option value ="' + key + '">' + value + '</option>';
    });
    
    newRow += '</select></td><td><label for="treatment' + counter + '">Treatment</label></td><td><select id="treatment' + counter + '" name="treatment' + counter + '">';
    
    $.each(obj.treatments, function (key, value) {
        $('#treatment' + counter);
        newRow += '<option value ="' + key + '">' + value + '</option>';
    });
    
    newRow += '</select></td></tr>';
    
    $('table.treatments').append(newRow);
});