JSFiddle - React, Tailwind, and code Playground

by 林 羿緯

HTML

<table id="testTable" cellpadding="10" border='1'>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>
      <input type="button" id="add" value="+">
    </td>
  </tr>
</table>

CSS

table {
  border: 3px #cccccc solid;
}

td{
  width: 20px;
}

JavaScript

var index = 5;


$(function(){
  $(document).on("click","#add",(function(){
  	$("#add").parent().before("<td>"+index+"</td>")  
		
    if(index % 4 == 0 ){
    	$("#add").parent().remove();
      $("#testTable").append(
      		'<tr><td><input type="button" id="add" value="+"></td></tr>'
      )
    }
    index++;
  }));
});