JSFiddle - React, Tailwind, and code Playground

by brettwgreen

HTML

<fieldset class="row2">
<legend>List of Participants</legend>
<p> 
    <input type="button" value="Add Participant" onClick="addRow('dataTable')" /> 
    <input type="button" value="Clear Participants" onClick="deleteRow('dataTable')"  /> 
    <p>(All acions apply only to entries with check marked check boxes only.)</p>
</p>
<table id="dataTable" class="form" border="1">
     <tbody>
        <tr>
           <p>
               <td>
                   <input type="checkbox" required="required" name="chk[]" checked="checked" />
               </td>
               <td>
                    <div>Participant: </div>
                    <select name="participant1" id="participant1">              
            <option>Person A</option>
                        <option>Person B</option>
                        <option>Person C</option>
                    </select>
               </td>
            </p>
         </tr>
     </tbody>
 </table>
 <div class="clear"></div>

JavaScript

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    if(rowCount < 50){                          
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;
        console.log(colCount);
        for(var i=0; i<colCount; i++) {
            var newcell = row.insertCell(i);
            //newcell.id="participant"+ rowCount;
            var cellBody = table.rows[0].cells[i].innerHTML;

            newcell.innerHTML = replaceAll( cellBody, 'participant1' , 'participant' + (rowCount+1) );
            console.log(rowCount, newcell.innerHTML)
        }
    }
    else {
       alert("More than 50 Participants? Are you sure?");
    }
}


function replaceAll(str, find, replace) {
    var i = str.indexOf(find);
    if (i > -1) {
        str = str.replace(find, replace); 
        i = i + replace.length;
        var st2 = str.substring(i);
        if(st2.indexOf(find) > -1) {
          str = str.substring(0,i) + replaceAll(st2, find, replace);
        }       
    }
    return str;
}