JSFiddle - React, Tailwind, and code Playground

by mkdizajn

HTML

<a type="button" value="Add row" onclick="mirko('dataTable2');">Add row</a>

<table id="dataTable2">
	<tbody>
		<thead>
			<td width="550">
				<p> <strong>Content</strong>
				</p>
			</td>
			<td width="50">
				<p align="center"> <strong>CLO</strong>
				</p>
			</td>
			<td width="50">
				<p align="center">
					<strong>PLO</strong>
				</p>
			</td>
			<td width="60">
				<p align="center">
					<strong>Weeks</strong>
				</p>
			</td>
		</thead>
		<tbody>
			<tr id="module">
				<td colspan="4" style="width:710; background-color:#A7B8D4; color:white;">
					<p class="modulenum">
						<strong align="center">MODULE 1</strong>
					</p>
				</td>
			</tr>
			<tr>
				<td valign="top" width="550">
					<p>
						<input type="text" value="" maxlength="255" class="textborder" class="table" />
					</p>
				</td>
				<td width="50">
					<p align="center">
						<input type="text" value="" maxlength="255"         class="textbordersmall"/>
					</p>
				</td>
				<td width="50">
					<p align="center">
						<input type="text" value="" maxlength="255"     class="textbordersmall"/>
					</p>
				</td>
				<td width="60">
					<p align="center">
						<input type="text" value="" maxlength="255" class="textbordersmall"/>
					</p>
				</td>
			</tr>			
		</tbody>
	</tbody>
</table>

JavaScript

function mirko(tableID){
    var table=document.getElementById(tableID)
    for(var l = 0; l < 2; l++){ 
	    var cl = table.tBodies[0].rows[l].cloneNode(true)
	    table.tBodies[0].appendChild( cl ) 
    }
}