I have a function that adds badges to a div by selecting items from a dropdown list.

I'm adding badges using this function added to the dropdown list onclick event:

function addBadge(parent, badgeId, value){
    var elem = document.getElementById(parent);

    var currentTaxiways = elem.children;
    var alreadyExists = false;

    for(var i = 0; i < currentTaxiways.length; i++){
        if(badgeId === currentTaxiways[i].id){
            alreadyExists = true;
        }
    }

    if(!alreadyExists) {
        var newBadge = document.createElement("span");
        newBadge.classList.add("badge");
        newBadge.classList.add("badge-primary");
        newBadge.classList.add("bg-secondary");

        newBadge.id = badgeId;

        var node = document.createTextNode(value);
        newBadge.appendChild(node);

        newBadge.innerHTML += "&emsp;";

        var deleteButton = document.createElement("a");
        deleteButton.href = "#";
        deleteButton.classList.add("x-btn");
        deleteButton.onclick = function delBadge() {
            deleteBadge(newBadge.id);
        };

        var node2 = document.createTextNode("X");
        deleteButton.appendChild(node2);

        newBadge.appendChild(deleteButton);

        elem.appendChild(newBadge);
    }
}

And the function for deleting the badges is this one:

function deleteBadge(badge){
    var elem = document.getElementById(badge);
    elem.parentNode.removeChild(elem);
}

How do I send the list of ids of all the badges added to the div to my controller using thymeleaf when the form is submitted?