Tengo una función que agrega insignias a un div seleccionando elementos de una lista desplegable.

Estoy agregando insignias usando esta función agregada a la lista desplegable al hacer clic en el evento:

 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); } }

Y la función para borrar las insignias es esta:

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

¿Cómo envío la lista de identificaciones de todas las insignias agregadas al div a mi controlador usando thymeleaf cuando se envía el formulario?