JSFiddle - React, Tailwind, and code Playground

HTML

<a href="javascript:void(0)" onclick="addInput('table', 'counter', 3)">click</a>
<input id="counter" value="3" />
<table id="table">

</table>

JavaScript

$(document).ready(function(){



    // Tried this suggestion found on stackoverflow:
    $('body').on('focus',".newlabour_date", function(){
    $(this).datepicker();});

    
    });

function addInput(table,counter,rowcount)
{
var counter = document.getElementById(counter);
var number = counter.value;
counter.value = ++counter.value;

var rowcount = parseInt(rowcount)+1; // muliply the rowcount by 1 to ensure it doesn't get treated as a concatenation.

var table = document.getElementById(table);
var row = table.insertRow(0);
row.align = "center";

var cell1 = row.insertCell(0);
cell1.className = "bBottom";
cell1.width = "20%";
cell1.height = "21";

cell1.innerHTML = "<input type=\"text\" style=\"position:relative; top:2px;\" class=\"noborder newlabour_date\" name=\"newlabour_date["+number+"]\" id=\"newlabour_date["+number+"]\" size=\"15\" maxlength=\"\" placeholder=\"\" value=\"\">";
}