Rearrange Bootstrap page into three columns and items under each other

I have a small tool for scrum teams to track people in the meeting. Now we are more people, one team is added and right now it seems more logical to re-arrange the elements.

Now if you click on team1/team2/team3 button, the names are sorted in 3 columns and next to each other. I want to change this, to 3 columns, but every team will have it's own column. So, team1 names will fill up the first column and the names in this team will come under each other. After that if I click on team2, the names of team2 will fill up the second column and the team3 will fill up the third column. I assume on every team button click the script should create one column and fill up this column, on the second team button click it will again create one column next to the first also on the third time. Is this possible? Thank you very much.

This is the one page working version, all names are randomly generated, completely anonym:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Team Members</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

    <style>
        .footer {
            position: fixed;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: 10;
        }

        .alert.member-clicked {
            text-decoration-line: line-through;
            background-color: #ddd;
            border-color: #ddd;
        }
        
        .alert.member-absent {
            text-decoration-line: line-through;
            background-color: #f8d7da;
            border-color: #f8d7da;
        }

        .copyright {
            margin-top: 10px;
            margin-right: 10px;
            text-align: right;
        }

        .form-inline.form-members .input-group {
            display: inline-table;
            vertical-align: middle;
        }
        .form-inline.form-members .input-group .input-group-btn {
            width: auto;
        }
        
        h2 {
            margin-bottom: 20px;
        }
    </style>

</head>

<body>
    <center>

<div class="container">
    <h2 class="text text-success text-center">My Team Members</h2>
    <div id="memberlist" class="row"></div>
</div>

<footer class="footer">
    <div class="container">
        <!-- Input for members -->
        <div class="form-inline form-members">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Add member" id="text" value="Alasdair Mckee">
                <div class="input-group-btn">
                    <button class="btn btn-success btn-addmember"><i class="glyphicon glyphicon-plus"></i></button>
                </div>
            </div>
            <button class="btn btn-success" data-team="team1"><i class="glyphicon glyphicon-plus"></i> Team1</button>
            <button class="btn btn-success" data-team="team2"><i class="glyphicon glyphicon-plus"></i> Team2</button>
            <button class="btn btn-success" data-team="team3"><i class="glyphicon glyphicon-plus"></i> Team3</button>
        </div>

        <div class="form-group hidden">
            <label for="exampleFormControlTextarea1">Team1</label>
            <textarea class="form-control" id="team1" rows="9">
                Bentley Parrish
                Hunter Pineda
                Ammar Burks
                Tanya Vang
                Aimie Ewing
                Anabella Chan
                Amayah Sparks
                Priyanka Cooke
                Boyd Pacheco
                Mai Lynch
            </textarea>

            <label for="exampleFormControlTextarea1">Team2</label>
            <textarea class="form-control" id="team2" rows="9">
                Alan Rangel
                Ikra Knowles
                Chelsea Avalos
                Aysha Glenn
                Margaret Couch
                Effie Corbett
                Yassin Arias
                Caspian Rice
            </textarea>
            
            <label for="exampleFormControlTextarea1">Team3</label>
            <textarea class="form-control" id="team3" rows="9">
                Armani Curran
                Monica Kemp
                Nur Davis
                Hashir Dodson
                Ty Hagan
                Aariz Rowley
            </textarea>
        </div>

    </div>
    <p class="copyright">Created by: Me • <a href="mailto:me@me.com">me@me.com</a> • ver 1.5</p>
</footer>

    </center>
    <script>
        $(document).ready(function() {

            var memberList = $("#memberlist");

            memberList.on("click", ".alert", function () {
                $(this).toggleClass("member-clicked");
            });

            memberList.on("click", ".close", function () {
                var memberColumn = $(this).parent().parent();
                memberColumn.fadeOut();
            });

            $(".btn-addmember").click(function () {
                var newMember = $("#text").val().trim();
                if (newMember) {
                    addMember(newMember);
                } else {
                    alert("Please, enter the name of the member");
                }
                $("#text").val("");
            });

            $(".btn[data-team]").click(function () {
                addTeam($(this).data("team"));
            });

            function addMember(member) {
                member = member.trim();
                if (member) {
                    memberList.append(
                        `<div class="col-xs-6 col-sm-4"><div class="alert alert-success">` +
                            `<span class="close" aria-label="close">&times;</span><b>` +
                            member +
                            `</b></div></div>`
                    );
                }
            }

            function addTeam(id) {
                var team = $("#" + id)
                    .val()
                    .trim();
                if (team) {
                    var members = team.split("\n");
                    console.log(members);
                    for (var i = 0; i < members.length; i++) {
                        addMember(members[i]);
                    }
                }
            }
            
            $(document).on('dblclick', '.alert', function() {
                $(this).toggleClass("member-absent");
            });
        });
    </script>
</body>

</html>