Reset where list items are moved to in an input field

Question

It's midnight and this may not come across properly but I'll try..

I have two lists. One list of to-do items and the other of finished items.

I have an input field and button that adds items to the to-do list when clicked. - That all works fine.

I have a button that will move all items in the to-do list to the finished list. - That all works fine BUT when I do that and then type a new item to add it to the to-do list it now all gets added to the finished list.

I know that's where I'm now moving it to but I thought a return false would work but alas.

 $ (function (){
  $("#stillToDo").sortable({
    connectWith: "#finished"
  });

  $("#finished").sortable({
    connectWith: "#stillToDo"
  });

  $("#newItemBtn").click(function(){
    let newInput = $("#newItem").val();

    $("#stillToDo").append("<li>" + newInput + "</li>");
    $("#newItem").val("");
    $("#lastUpdated").text("Last updated " + Date()); 
  })

  $("#newItem").keypress(function(event){
    let newInput = $("#newItem").val();
    let keycode = (event.keyCode ? event.keyCode : event.which);

    if(keycode == '13'){
      $("#stillToDo").append("<li>" + newInput + "</li>");
      $("#newItem").val("");
      $("#lastUpdated").text("Last updated " + Date()); 
    }
  });

  $("#allFinished").click (function(){
    $("#finished").append($("#stillToDo"))
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sideBar">

    <h2>D-B-To-Do</h2>

    <div id="searchBar" class="input-group col">
      <input class="form-control py-2" type="search" placeholder="Search your items " id="searchInput">
      <span class="input-group-append">
        <button class="btn btn-outline-secondary" type="button">
            <i class="fa fa-search"></i>
        </button>
      </span>
    </div>

    <div class="days">
      <h3>Monday</h3><hr>
    </div>
    <div class="days">
      <h3>Tuesday</h3><hr>
    </div>
    <div class="days">
      <h3>Wednesday</h3><hr>
    </div>
    <div class="days">
      <h3>Thursday</h3><hr>
    </div>
    <div class="days">
      <h3>Friday</h3><hr>
    </div>
    <div class="days">
      <h3>Saturday</h3><hr>
    </div>
    <div class="days">
      <h3>Sunday</h3><hr>
    </div>

  </div>

  <div id="dayInfo" class="container col-6 row align-items-center dayInfo ">
    <div class="card">
      <img id="mondayImg" class="card-img-top" >
      <div class="card-body">
        <h3 class="card-title">Monday</h3>
        <div id="subTitle" class="row">
          <div class="col">
            <h5>Still to do</h5>
            <button id="allFinished" class="btn btn-success">Move all to finished</button><hr>
            
            <ul id="stillToDo">
              <li>test1</li>
            </ul>
            
          </div>
          <div class="col">
            <h5>Finished</h5><button id="allFinished" class="btn btn-danger">Remove finished</button><hr>

            <ul id="finished">
              <li>test2</li>
            </ul>
          </div>
          

        </div>
       <div id="newItemWrapper">
        <input id="newItem" placeholder="Add a new item"><br>
        <h6 id="newItemBtn" class="btn btn-success">Add new item</h6>
        <p class="card-text"><small id="lastUpdated" class="text-muted">Last updated </small></p>
      </div>
      </div>  
    </div>
</div>

Answer 1

For anyone wondering mindnight is not the best time to try and solve a problem...

Rather than moving the whole list over to the finished pile I just move the existing list items... Works perfectly now!

Answer 2

you are actually appending the full '#stillToDo ul' to the '#finished' that's why this weird behavior you are facing. . . just use this $("#finished").append($("#stillToDo").children()); everything will be ok. . .

$("#allFinished").click (function(){
    $("#finished").append($("#stillToDo").children());
});

hope you get it and helped you.