Как реализовать закрытие редактирования одной задачи и открытие редактирования другой задачи в todo-list app на чистом js

Пишу todo-list app на чистом js. Хочу реализовать следующее:

• Пользователь нажал на кнопку "Редактировать" у одной задачи. Появился инпут.
• Пользователь передумал редактировать эту задачу и нажал кнопку "Редактировать" еще у одной задачи.

Мне нужно, чтобы не было два инпута для редактирования, а первый инпут закрылся, а второй стал доступен.

Другими словами, чтобы пользователь мог редактировать одновременно только одну задачу.
Помогите, плиз.

HTML

<main class="main page__section">
    <form class="form">
      <input class="form__text" type="text" placeholder="Новая задача" autofocus minlength="1" maxlength="53">
      <button class="button button_variant_add" type="button" aria-label="Добавить задачу"></button>
    </form>

    <ul class="list"></ul>

  </main>
</div>

<template id="template">
  <li class="list__task">
    <label class="list__label">
      <input class="list__checkbox-input" type="checkbox">
      <span class="list__checkbox-toggle"></span>
    </label>
    <p class="list__task-text"></p>
    <button class="button button_variant_edit" type="button" aria-label="Редактировать задачу"></button>
    <button class="button button_variant_delete" type="button" aria-label="Удалить задачу"></button>
  </li>
</template>