How to Edit a todo task on same component in Ember

I want to edit a todo task on same list style tag without affecting the other todo present.

Below is the an image of the todo

The second image below is when the edit button is clicked.

What I want to achieve is when the edit button is clicked on a particular todo, I want an input field with the data to appear in the text field and the todo itself to disappear. I want it to happen to one particular todo and not affect all of them.

The code below is what I have tried.

This code tell if it is in edit mode it should display the text input field esle display the todo

todo.hbs

<ul class="list-group">
        
          <li class="list-group-item ">
            
              <div class="text-input">
                
                <span class="text-info right edit" ><i class="far fa-edit"></i></span>
              </div>
            
              <span class="round">
                
                <label for="checkbox"></label>
              </span>
              <span>
                 - <span class="date "></span>
              </span>
              <span class="text-danger right delete" ><i class="far fa-trash-alt"></i></span>
              <span class="text-info right edit" ><i class="far fa-edit"></i></span>
            
          </li>
        
      </ul>

todo.js

export default Controller.extend({
  isEdit: false,
  actions: {
   editTodo: function(todo) {
     this.toggleProperty('isEdit');
   },
   cancelEdit: function () {
     this.toggleProperty('isEdit');
   }
 },
})

how can I do what i want to do without affecting other todos?