JSFiddle - React, Tailwind, and code Playground
HTML
<table class="tables" id="playerSearchTable" >
<form>
<tr class="player_search_tr">
<td class="playerTeamTableName10" key="0" id="player_name_submit" width="250px">td0</td>
<input type="hidden" id="player_name0" value="name0" />
<input type="hidden" id="player_pos0" value="pos0" />
<td width="90px" style="padding-left: 25px;" >pos0</td>
<td class="playerTeamTableName" width="90px" style="padding-left: 25px;">team0</td>
<td width="120px" style="padding-left: 25px;">league0</td>
</tr>
</form>
<form>
<tr class="player_search_tr">
<td class="playerTeamTableName11" key="1" id="player_name_submit" width="250px">td1</td>
<input type="hidden" id="player_name1" value="name1" />
<input type="hidden" id="player_pos1" value="pos1" />
<td width="90px" style="padding-left: 25px;" >pos1</td>
<td class="playerTeamTableName" width="90px" style="padding-left: 25px;">team1</td>
<td width="120px" style="padding-left: 25px;">league1</td>
</tr>
</form>
</table>
<table id="playerSearchTable1" style="background-color:blue;">
</table>
JavaScript
$(document).ready(function(){
ul = document.getElementById("playerSearchTable");
li = ul.getElementsByTagName('tr');
for (i = 0; i < li.length; i++) {
player_name = li[i].getElementsByClassName("playerTeamTableName1"+i);
$(player_name).click(function(){
let j = $(this).attr('key');
var name = $("input[id='player_name"+j+"']").val();
var pos = $("input[id='player_pos"+j+"']").val();
player_table_list = document.getElementById("playerSearchTable1");
var markup = "<tr class=\"player_search_tr\"><td width=\"60px\"></td><td width=\"300px\">" + name + "</td><td width=\"90px\">" + pos + "</td></tr>";
$('#playerSearchTable1').append(markup);
});
}
});