JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<table style="background-color:gray; color:white; border:1px solid red;">
    <tbody><tr id="player-listing-1">
        <td style="vertical-align: top;"><button onclick="myFunction2(1)" id="add1">Add</button><br></td>
        <td style="vertical-align: top; " id="Position1">Position1<br></td>
        <td style="vertical-align: top;" id="Player1">Player1<br></td>
        <td style="vertical-align: top;" id="Team1">Team1<br></td>
        <td style="vertical-align: top;" id="Opponent1">Opponent1<br></td>
        <td style="vertical-align: top;" id="Projected1">Projected1<br></td>
        <td style="vertical-align: top;" id="Salary1">Salary1<br></td>
    </tr>
<tr id="player-listing-2">
        <td style="vertical-align: top;"><button onclick="myFunction2(2)" id="add2">Add</button><br></td>
        <td style="vertical-align: top;" id="Position2">Position2</td>
        <td style="vertical-align: top;" id="Player2">Player2</td>
        <td style="vertical-align: top;" id="Team2">Team2</td>
        <td style="vertical-align: top;" id="Opponent2">Opponent2</td>
        <td style="vertical-align: top;" id="Projected2">Projected2</td>
        <td style="vertical-align: top;" id="Salary2">Salary2</td>
    </tr><tr id="player-listing-3">
        <td style="vertical-align: top;"><button onclick="myFunction2(3)" id="add3">Add</button><br></td>
        <td style="vertical-align: top;" id="Position3">Position3</td>
        <td style="vertical-align: top;" id="Player3">Player3</td>
        <td style="vertical-align: top;" id="Team3">Team3</td>
        <td style="vertical-align: top;" id="Opponent3">Opponent3</td>
        <td style="vertical-align: top;" id="Projected3">Projected3</td>
        <td style="vertical-align: top;" id="Salary3">Salary3</td>
    </tr><tr id="player-listing-4">
        <td style="vertical-align: top;"><button onclick="myFunction2(4)" id="add4">Add</button><br></td>
        <td style="vertical-align: top;" id="Position4">Position4</td>
        <td...

JavaScript

function myFunction2(i) {
  var table = document.getElementById('selected-players')
  var copyRow = document.getElementById('player-listing-' + i).cloneNode(true);
  copyRow.setAttribute('id', 'selected-row-' + i);
  copyRow.cells[0].innerHTML = '<button onclick="removeRow(this, ' + i + ')">Remove</button>';
  table.appendChild(copyRow);
  document.getElementById("add" + i).disabled = true;
}

function removeRow(btn, idx) {
  var row = btn.parentNode.parentNode;
  row.parentNode.removeChild(row);
  document.getElementById('selected-players');
  document.getElementById("add" + idx).disabled = false;
}