JSFiddle - React, Tailwind, and code Playground

by csornmo

HTML

<table id="testTable">
	
	<thead>
		<tr>
			<td>#</td>
			<td>1</td>
			<td>2</td>
			<td>3</td>
		</tr>
	</thead>
	
	
	<tbody>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</tbody>
	
	
</table>

<div class="elements">

</div>
<br><br><b>IT SHOLD LOOK LIKE THIS</b>

<table>
	
	<thead>
		<tr>
			<td>#</td>
			<td>1</td>
			<td>2</td>
			<td>3</td>
		</tr>
	</thead>
	
	
	<tbody>
		<tr>
			<td>John</td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>Dan</td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>Ken</td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>Mark</td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</tbody>
	
	
</table>

CSS

table {
	border-collapse: collapse;
}

td {
	border: 1px solid #000;
	padding: 10px;
}

JavaScript

var myArray = [	"John","Dan","Ken","Mark"];
console.log(myArray)


myArray.forEach(function(val, i) {

  $('#testTable tbody tr td' + i).html(val);
  
})

var serial = [ "one", "two", "three", "four", "five"];
serial.forEach(function(val, i) {
 
 $('.elements').append('<div class="n' + i + '">'+val+'</div>');
  
})