I am trying to find a way to do something with JavaScript. I have a list of exercises, they are 5, and I want when I click on one of them, this exactly one to be transferred to another list(right one), this will be the exercises the user choose from the left list, and if he changes his mind, to be able to return this exercise to the left list. Also, when some exercises are chosen, to be visible only on the right site.
<ul id="left" th:each="exercise : ${exercises}">
<button type="submit">
<li th:text="${exercise.name}">
</button>
</li>
</ul>
<ul id="right" th:each="exercise : ${exercises}">
<button type="submit">
<li th:text="${exercise.name}">
</button>
</li>
</ul>
Something like that. (I build the whole project with Java and Spring)
I assume the 2 lists come from the Back End and are rendered on the UI.
You need to send a request to the server to tell that an item that clicked on to the server "API endpoint" to move the item to the 2nd list
If the lists are built on the Front end and then will be submitted to the server
You need to remove the element from 1st list and then add it to the 2nd list
<ul id="left">
<li id="i" onclick="remove(this)">Item that clicked on</li>
</ul>
<ul id="right">
<li id="li1">li 1</li>
<li id="li2">li 2</li>
</ul>
<script>
function remove(el) {
const textContent = el.textContent;
// copy classes or id or anything
el.remove();
addElementToRightList(textContent);
}
function addElementToRightList(textContent) {
const parent = document.querySelector("#right");
const element = document.createElement("li");
// do stuff with element eg: set text by getting it from item that clicked on using textContent
element.textContent = textContent;
parent.appendChild(element);
}
</script>