JSFiddle - React, Tailwind, and code Playground

HTML

<table width="100%" id="objectives">
    <tr>
		  <th width="50%">Objectives</th>
		  <th width="50%">Solutions</th>
	  </tr>
	  <tr>
		  <td>
        <label for="obj1">Objective 1</label>
				<textarea id="obj1" name="obj1"></textarea></td>
			<td>
        <ul id="obj1solutions">
            <li>
                <label for="obj1sol1">Solution 1</label>
                <textarea id="obj1sol1" name="obj1sol1"></textarea>
            </li>
            <li>
                <label for="obj1sol2">Solution 2</label>
                <textarea id="obj1sol2" name="obj1sol2"></textarea>
            </li>
            <li>
                <label for="obj1sol3">Solution 3</label>
                <textarea id="obj1sol3" name="obj1sol3"></textarea>
            </li>
        </ul>
			  <p>
          <a href="#" onclick="addSolution('#obj1solutions', 1); return false;">
             Add solution
          </a>
        </p>
			</td>
		</tr>
</table>
  
<p>
  <a href="#" onclick="addObjective('#objectives'); return false;">
     Add objective
  </a>
</p>

CSS

table, td, th {
  border:solid 1px black; 
  padding:15px;
}
th, label {
  font-weight:bold; 
}
a {
  display: block;
  padding: 3px 6px;
  height: 20px;
  border: solid 1px blue;
  text-decoration: none;
  color: #333;
  background: #C1EAFF;
}
p {
  margin:15px 0px; 
}
textarea {
  width:90%;
  height:100px;
}

JavaScript

function addSolution(container, objectiveID) {
  var newSolutionID = $(container).find("li").size() + 1;	
  var newSolution = dynamic_clone($(container).find("li:first-child"), objectiveID, newSolutionID);		
  
  $(container).append(newSolution);
}

function addObjective(container) {
  var newObjectiveID = $(container).find("tr").length;	
  var newObjective = dynamic_clone($(container).find("tr:nth-child(2)"), newObjectiveID);		
  
  $(container).append(newObjective);
}

function dynamic_clone(object, objectiveID, newSolutionID) {
  var clone = $(object).clone();
  
  $(clone)
  .find("label").each(function() {
    $(this).attr("for", $(this).attr("for").replace("obj1", "obj"+objectiveID))
    $(this).html($(this).html().replace("Objective 1", "Objective "+objectiveID))
  })
  .end()
  .find("textarea").each(function() {
    $(this)
    .attr("id", $(this).attr("id").replace("obj1", "obj"+objectiveID))
    .attr("name", $(this).attr("name").replace("obj1", "obj"+objectiveID))
  })
  .end()
  .find("ul").each(function() {
      $(this).attr("id", $(this).attr("id").replace("obj1", "obj"+objectiveID))
   })
  .end()
  .find("ul li:gt(2)").each(function() {
      $(this).remove();
   })
  .end()
  
  //============================================
  //BEGIN OF THE CODE THAT NEED TO WORK FINE !!!
  .find("a[onclick]").each(function() {
      $(this).attr('onclick', function(i, v){
         return v.replace(/1/g, objectiveID);
      });
   })
  //END OF THE CODE THAT FINALLY WORK FINE !! :)
  //============================================

  
  if (newSolutionID) {
    $(clone)
    .find("label").each(function() {
        $(this).attr("for", $(this).attr("for").replace("sol1", "sol"+newSolutionID))
        $(this).html($(this).html().replace("Solution 1", "Solution "+newSolutionID))
    })
    .end()
    .find("textarea").each(function() {
      $(this)
      .attr("id", $(this).attr("id").replace("sol1", "sol"+newSolutionID))
      .attr("name",...