JSFiddle - React, Tailwind, and code Playground

HTML

<body onload="playerFunction()">
    
<h2>Generator</h2>

    <p id="playerList"></p>
    <button onclick="randomFunction()">Make teams</button>
    <div>
        <p>
            <input type="text" id="addPlayer">
            <select id="addTier">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
            <button onclick="addFunction()">Add</button>
            </br>
            <input type="text" id="removePlayer">
            <button onclick="removeFunction()">Remove</button>
            <p id="test1"></p>
            <p id="test2"></p>
            <p id="test3"></p>
            <p id="test4"></p>
            <p id="test5"></p>
            <p id="team1"></p>
            <p id="team2"></p>
</body>

CSS

#team1 {
 color:red;   
}
#team2 {
    color:blue;
}

JavaScript

var tier1 = ["p1", "p2", "p3", "p4", "p5"];
var tier2 = ["p6", "p7", "p8", "p9", "p10", "p11"];
var tier3 = ["p12", "p13", "p14", "p15", "p16"];

var player = [];
var team1 = [];
var team2 = [];

var index;
var i;
var playerAlert;
var randomNumber1;

function eliminateDuplicates(team1) {
    len = team1.length,
    out1 = [],
    obj = {};
    for (i = 0; i < len; i++) {
        obj[team1[i]] = 0;
    }
    for (i in obj) {
        out1.push(i);
    }
    return out1;
}

function eliminateDuplicates2(team2) {
    len2 = team2.length,
    out2 = [],
    obj2 = {};
    for (i = 0; i < len2; i++) {
        obj2[team2[i]] = 0;
    }
    for (i in obj2) {
        out2.push(i);
    }
    return out2;
}

function randomFunction() {
    document.getElementById("test4").innerHTML = team1.length;
    //document.getElementById("test5").innerHTML = team2.length;
    if (team1.length <= 6 ) { //|| team2.length <= 5
        for (index = 0; index < tier1.length; index++) {
            randomNumber1 = Math.floor(Math.random() * 9);
            //document.getElementById("test4").innerHTML = randomNumber1;
            if (randomNumber1 <= 4) {
                team1.push(tier1[0]);

                eliminateDuplicates(team1);
                tier1.splice(0, 1);
                document.getElementById("test2").innerHTML = team1;
                document.getElementById("test3").innerHTML = team2;
                document.getElementById("team1").innerHTML = out1;
            } else {
                team2.push(tier1[0]);

                eliminateDuplicates2(team2);
                tier1.splice(0, 1);
                document.getElementById("test2").innerHTML = team1;
                document.getElementById("test3").innerHTML = team2;
                document.getElementById("team2").innerHTML = out2;
            }
        }

        for (index = 0; index < tier2.length; index++) {
            randomNumber1 = Math.floor(Math.random() * 9);
           ...