How do I move item from 1 list to another list in HTML

example_output

Hi, I’m trying to implement something like this where the user can click on an item and move it from left to right div or list and vice versa (refer to attached image). The list of items needs to be tracked so I’m able to use javascript to do some processing. I saw some websites done this before but not sure what this is called, is there any terminology for this? I’m don’t really know what to search on google so I’m a bit stuck currently. Greatly appreciated it if anyone can help with this, thanks.

Answer

You can add a click event listener to both lists that appends the event target to the other list and deletes the event target.

row1.addEventListener('click', function(e){
  if(e.target != this){
    row2.appendChild(e.target.cloneNode(true));
    e.target.remove()
  }
})

row2.addEventListener('click', function(e){
  if(e.target != this){
    row1.appendChild(e.target.cloneNode(true));
    e.target.remove()
  }
})
.row {
  display: flex;
}
<div class="row">
  <ul id="row1">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>

  <ul id="row2">
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
  </ul>
</div>