JSFiddle - React, Tailwind, and code Playground

by Guksels

HTML

<br>
      <div class="table">
         <div class="tablehead">
            <div class="row">
               <div class="kur">Id</div>
               <div class="elm">Vārds</div>
               <div class="elm">Uzvārds</div>
               <div class="elm">Nummurs</div>
               <div class="elm">Adrese</div>
               <div class="elm">Pilsēta</div>
               <div class="elm">Iela</div>
               <div class="elm">Māja</div>
               <div class="elm">Saglabāt</div>

            </div>
         </div>
         <div class="tablebody">
            <form class="row editing" id="forma">
               <div class="kur"><input type="text" name="ID"      value="1" id="ID"></div>
               <div class="elm"><input type="text" name="Vards"   value=""  id="Vards"></div>
               <div class="elm"><input type="text" name="Uzvards" value=""  id="Uzvards"></div>
               <div class="elm"><input type="text" name="Nummurs" value=""  id="Nummurs"></div>
               <div class="adr"></div>
               <div class="elm"><input type="text" name="Adrese[Pilseta]"value=""id="Pilseta"></div>
               <div class="elm"><input type="text" name="Adrese[Iela]"value=""   id="Iela"></div>
               <div class="elm"><input type="text" name="Adrese[Maja]"value=""   id="Maja" ></div>
               <div class="adr"><input type="button" id="saglabat" value="Saglabāt" ></div>
            </form>
         </div>
		 <div class="tablebody">
				<div class="kur">Izvelies -</div>
               <div class="adr"><input type="number" name="kurs"  value="1" id="kurs" min="1" ></div>
               <div class="adr"><input type="button" id="rediget" value="Rediģēt" ></div>
               <div class="adr"><input type="button" id="izdzest" value="Izdēst" ></div>
		 </div>
      </div>
     
      <pre class="dati" id="dati" > </pre>
      <div>
         <table id="Tabula">
           <thead>
              <tr>
               <th>ID</th>
              ...

CSS

table{
	border-collapse:collapse; 
	border:1px solid black;
	width:800px;
}
th,td{
	border:1px solid black; 
}
 table tr th:nth-child(5){
       width: 60px;
     }
	  table tr th:nth-child(1){
       width: 10px;
     }
.table
{
	display:table;
	border-collapse:separate;
	 border-spacing:2px; 
}
.tablehead
{
	display:table-header-group;
	color:black;
	font-weight:bold;
	background-color:lightblue;
	text-align:center; 
}
.short
{
	width:60px; 
}

input{
width:100px; 
}
input[Name="ID"]{
background-color : #d1d1d1;
	width:60px;
	text-align: center; 
}
input[Name="kurs"]{
text-align: right; 
background-color : #d1d1d1;
}

.tablebody
{
	display:table-row-group;
}
.row
{
	display:table-row;
}
.elm,.kur,.adr
{
	display:table-cell;
	border:1px solid black;
	padding:1px;
 
}
.adr,.kur{
	background-color:lightblue;
	color:black; 
	}

JavaScript

$(document).ready(function(){

		 var RCount=1,RCount2=0,
		 table = document.getElementById("Tabula");
		 
         document.getElementById("saglabat").onclick = (function(){
		 var newRow = table.insertRow(table.length),
		 cell1 = newRow.insertCell(0),
		 cell2 = newRow.insertCell(1),
         cell3 = newRow.insertCell(2),
		 cell4 = newRow.insertCell(3),
		 cell5 = newRow.insertCell(4),
         cell6 = newRow.insertCell(5),
		 cell7 = newRow.insertCell(6),
		 cell8 = newRow.insertCell(7),
		 ide = document.getElementById("ID").value,
         Vards = document.getElementById("Vards").value,
         Uzvards = document.getElementById("Uzvards").value,
         Nummurs = document.getElementById("Nummurs").value,
         Pilseta = document.getElementById("Pilseta").value,
         Iela = document.getElementById("Iela").value,
         Maja = document.getElementById("Maja").value;   
                cell1.innerHTML = ide;
                cell2.innerHTML = Vards;
                cell3.innerHTML = Uzvards;
				cell4.innerHTML = Nummurs;
                cell6.innerHTML = Pilseta;
                cell7.innerHTML = Iela;
				cell8.innerHTML = Maja;


		// console.log( $(forma).serializeObject() );
         RCount++; 
		 RCount2++; 
         $("input[id='ID']").val(RCount);
         $("input[id='kurs']").val(RCount - 1);
         });
		 
         document.getElementById("rediget").onclick = (function(){
		 
		 var 	ide = document.getElementById("ID").value,
				Vards = document.getElementById("Vards").value,
				Uzvards = document.getElementById("Uzvards").value,
				Nummurs = document.getElementById("Nummurs").value,
				Pilseta = document.getElementById("Pilseta").value,
				Iela = document.getElementById("Iela").value,
				Maja = document.getElementById("Maja").value;
				kurs= document.getElementById("kurs").value;
				kurs++; 
		 table.rows[kurs].cells[0].innerHTML = ide;
         table.rows[kurs].cells[1].innerHTML = Vards;
		 table.rows[kurs].cells[2].innerHTML...