JSFiddle - React, Tailwind, and code Playground

HTML

<cfloop from="1" to="11" index="fieldNo">
    <tr>
        <td align="center" class="content">
            <cfinput type="text" name="player#fieldNo#" id="player#fieldNo#" value="#fieldNo#" class="formItem formItemXSmall" />
        </td>
        <td class="content">
            <cfselect name="player#fieldNo#Name" class="formItem" onChange="filterLists('player#fieldNo#Name');">
                <option value="">Please Select...</option>
                <cfloop query="getClubPlayers">
                    <cfset Variables.playerName = PL_Surname & ', ' & PL_FirstName />
                    <cfif IsDate(PL_DOB)>
                        <cfset Variables.playerAge = "Age " & DateDiff('yyyy',PL_DOB,Now()) />
                    <cfelse>
                        <cfset Variables.playerAge = "" />
                    </cfif>
                    <option value="#re_playerID#" class="#re_playerID#">#Variables.playerName# #Variables.playerAge#</option>
                </cfloop>
            </cfselect>
        </td>
    </tr>
</cfloop>

JavaScript

function filterLists(selectBox){
	var selectBox = selectBox;
	var personID = "";
	if (selectBox == 'player1Name') {
		playerID = $("#player1Name option:selected").val();
		$("select#player2Name >option" ).filter( "[class='"+ playerID +"']" ).hide();
		$("select#player2Name >option" ).filter( "[class!='"+ playerID +"']" ).show();
		$("select#player3Name >option" ).filter( "[class='"+ playerID +"']" ).hide();
		$("select#player3Name >option" ).filter( "[class!='"+ playerID +"']" ).show();
		$("select#player4Name >option" ).filter( "[class='"+ playerID +"']" ).hide();
		$("select#player4Name >option" ).filter( "[class!='"+ playerID +"']" ).show();
		$("select#player5Name >option" ).filter( "[class='"+ playerID +"']" ).hide();
		$("select#player5Name >option" ).filter( "[class!='"+ playerID +"']" ).show();
		$("select#player6Name >option" ).filter( "[class='"+ playerID +"']" ).hide();
		$("select#player6Name >option" ).filter( "[class!='"+ playerID +"']" ).show();
		$("select#player7Name >option" ).filter( "[class='"+ playerID +"']" ).hide();
		$("select#player7Name >option" ).filter( "[class!='"+ playerID +"']" ).show();
		$("select#player8Name >option" ).filter( "[class='"+ playerID +"']" ).hide();
		$("select#player8Name >option" ).filter( "[class!='"+ playerID +"']" ).show();
		$("select#player9Name >option" ).filter( "[class='"+ playerID +"']" ).hide();
		$("select#player9Name >option" ).filter( "[class!='"+ playerID +"']" ).show();
		$("select#player10Name >option" ).filter( "[class='"+ playerID +"']" ).hide();
		$("select#player10Name >option" ).filter( "[class!='"+ playerID +"']" ).show();
		$("select#player11Name >option" ).filter( "[class='"+ playerID +"']" ).hide();
		$("select#player11Name >option" ).filter( "[class!='"+ playerID +"']" ).show();
		$("select#subbedPlayer12 >option" ).filter( "[class='"+ playerID +"']" ).show();
		$("select#subbedPlayer13 >option" ).filter( "[class='"+ playerID +"']" ).show();
		$("select#subbedPlayer14 >option" ).filter(...