Insert array elements into a div's li element with jQuery

Question

I am trying to build a random teams creator with jQuery. I've finished working on the functions, it creates random teams, but now I'm trying to get the created teams' players into divs ordered as ul. I've tried with $('#team1 li').html( team ); but the whole team is displayed in one li element. How can I display one player in one li element?

Here is the HTML code:

<form>
    <div class="teamsNumber">How many teams do you want to create?<br>
        <input type="text" name="teamsNumber"><br>
    </div>
    <br>
    <div class="players">Players:<br>
        <textarea rows="12" cols="20"></textarea>
    </div>
    <input type="submit" value="Submit"><br>
</form>

<div class="resultingTeams">
    <h1>Team 1</h1>
    <ul id="team1">
        <li id="p1">player 1</li>
        <li id="p2">player 2</li>
        <li id="p3">player 3</li>
        <li id="p4">player 4</li>
        <li id="p5">player 5</li>
    </ul>
</div>

Here is the jQuery code:

$(document).ready(function () {

    $("form").submit(function (event) {
        event.preventDefault();

        var playerNames = $(".players textarea").val();
        var players = playerNames.split("\n");
        var playersAmount = (players.length);
        var teamsAmount = $(".teamsNumber input").val();
        var mixedPlayers = [];
        var minIndex = 0;
        var maxIndex = playersAmount - 1;

        for (i = 0; i < playersAmount; i++) {

            var random = getRandom(minIndex, maxIndex);

            while (mixedPlayers[random] !== undefined) {
                random = getRandom(minIndex, maxIndex);
            }

            mixedPlayers[random] = players[i];

        }

        var breakpoint = Math.ceil(playersAmount / teamsAmount);
        $('#resultingTeams').html("");
        for (i = 0; i < teamsAmount; i++) {
            var team = mixedPlayers.splice(0, breakpoint);

            //$('.resultingTeams').append(" ");
            console.log(team)
        }

        function getRandom(min, max) {
            return Math.round(Math.random() * (max - min) + min);
        }

        $('#team1 li').html(team);
    });
})

https://jsfiddle.net/uybgdhcp/

Answer 1

You can map each team array to an array of <li>s and compose the HTML from there.

function getRandom(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

$(document).ready(function() {
  $("form").submit(function(event) {
    event.preventDefault();

    var playerNames = $(".players textarea").val();
    var players = playerNames.split("\n");
    var playersAmount = (players.length);
    var teamsAmount = $(".teamsNumber input").val();
    var mixedPlayers = [];
    var minIndex = 0;
    var maxIndex = playersAmount - 1;

    for (i = 0; i < playersAmount; i++) {
      var random = getRandom(minIndex, maxIndex);
      while (mixedPlayers[random]) {
        random = getRandom(minIndex, maxIndex);
      }
      mixedPlayers[random] = players[i];
    }

    var breakpoint = Math.ceil(playersAmount / teamsAmount);
    $('.resultingTeams').html("");
    for (i = 0; i < teamsAmount; i++) {
      var team = mixedPlayers.splice(0, breakpoint);
      var $team = team.map((name) => $("<li>").text(name));
      $('.resultingTeams').append($("<h1>").text("Team " + (i + 1)));
      $('.resultingTeams').append($("<ul>").html($team));
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="teamsNumber">How many teams do you want to create?
    <br>
    <input type="text" name="teamsNumber" value="3">
    <br>
  </div>
  <br>
  <div class="players">Players:
    <br>
    <textarea rows="12" cols="20">Alice
Bob
Chris
Darren
Eugene
Felix</textarea>
  </div>
  <input type="submit" value="Submit">
  <br>
</form>

<div class="resultingTeams"></div>