Multiple buttons in a form. But action is performed only once

I have a form inside which I have two buttons which are not visible together. Depending upon some value from the server side, one of them is visible.

<div class="card card-body text-center mb-3" style="background:#C4302B; color:black">
    <h4></h4>
   
    <form action="/todos/editStatus/?_method=PUT" method="post" >
         <input type="hidden" name="_method" value="PUT">
         
            <input type="submit" class="btn btn-block mb-2" style="background:grey" name="done" value="Not Done">
         

         
            <input type="submit" class="btn btn-success btn-block mb-2" name="not-done" value="Done">
         

    </form>

Lets say, these buttons are used to change the status of a todo.

Here is my /todos/editStatus/:id route:

router.put("/editStatus/:id",(req, res)=>{
    Todo.findOne(
        {_id:req.params.id}
    ).then((todo)=>{
        if(todo.status=="Not Done")
        todo.status="Done";
        else if(todo.status=="Done")
        todo.status=="Not Done"
      

       todo.save().then(todo=>{
            console.log("Status Updated todo-> "+todo);
           res.redirect("/todos");
       })
    })
   
})

But if I click on the button, the action is performed only once. If I click the same button whose status was changed. Nothing works.

Example

Button Not-Done==> Done Done==> Should change to Not-Done (But nothing happens).

Can someone help me with this?