I've been struggling to figure out how to move an li element to the bottom of a ul in JavaScript. I looked at various solutions on Stack Overflow, such as Move the first four list items to the end of the list and Move items in Ul Li up and down, but none of them worked for my specific case. I even attempted removing the li and adding it back later, but had trouble with the onclick functionality.
Below is the code snippet for the ul:
<ul class="role_box_roles" id="rbroles">
<li class="role_box_role" style="border-color: rgb(255, 0, 0);">
<button class="role_remove_button" type="button" style="background-color: rgb(255, 0, 0);">-</button>
<span>Staff</span>
</li>
<li id="plusbutton"><button class="role_add" type="button" onclick="show_options()">+</button></li>
</ul>
The desired li element to be kept at the bottom is the one identified by the "plusbutton" id. (Whenever a new item is added to the ul, it should appear below the "plusbutton" li.)
Here's the add_option function that adds a new option to the ul:
function add_option(optionname) {
var listItem = document.createElement("li");
var removeButton = document.createElement("button");
var optionSpan = document.createElement("span");
listItem.className = "role_box_role";
listItem.style = "border-color: rgb(255, 0, 0);";
//removeButton.type = "button";
removeButton.innerText = "-";
removeButton.className = "role_remove_button";
removeButton.style = "background-color: rgb(255, 0, 0);";
optionSpan.innerText = optionname;
listUl = document.getElementById("rbroles");
listUl.appendChild(listItem);
listItem.appendChild(removeButton);
listItem.appendChild(optionSpan);
}