Как лучше реализовать на JS кнопку заказа, по которой щелкаешь, она исчезает и появляется блок с кнопками плюс, минус и инпут с числом(как в Ozon)

const defaultOrderBtn = () => { // Разметка кнопки "order", возвращается через функцию
  const btn = document.createElement('button') // создаём кнопку
  btn.className = ['btn', 'btn-order'] // добавляем ей стили
  btn.textContent = 'order' // добавляем ей текст

  btn.addEventListener('click', () => orderHandler(btn)) // добавляем ей обработчик

  return btn // возвращаем кнопку
}

const quantityButtons = () => { // Разметка кнопок с изменением кол-ва продуктов
  const parent = document.createElement('div') // создаём обёртку
  parent.className = ['quantity'] // добавляем класс

  const counter = document.createElement('input') // создаём "счётчик" товара
  counter.type = 'number' // назначаем тип
  counter.readOnly = true // запрещаем редактирование (если разрешить, нужно будет доработать)
  counter.value = 1 // Устанавливаем значение по умолчанию

  const minus = document.createElement('input') // создаём инпут "-"
  minus.type = 'button' // он будет кнопкой
  minus.value = '-'
  minus.addEventListener('click', () => minusHandler(parent, counter)) // вешаем обработчик, в него передаём обёртку и наш "счётчик"

  const plus = document.createElement('input') // Тут аналогично, но с "+"
  plus.type = 'button'
  plus.value = '+'
  plus.addEventListener('click', () => plusHandler(parent, counter))

  // Добавляем все кнопки в обёртку
  parent.append(minus)
  parent.append(counter)
  parent.append(plus)

  return parent // возвращаем обёртку
}

// Обработчик кнопки "order"
const orderHandler = (button) => {
  button.parentNode.replaceChild(quantityButtons(), button) // при нажатие, заменяем кнопку "order" кнопками изменения кол-ва товаров
}

// Обработчик кнопки "-"
const minusHandler = (parent, counter) => {
  if(+counter.value - 1 !== 0) { // Если при уменьшение кол-ва товаров в "счётчике" не 0
    counter.value = +counter.value - 1 // сохраняем изменение
  } else { // Если же 0
    parent.parentNode.replaceChild(defaultOrderBtn(), parent) // То меняем кнопки на "order"
  }
}

// Обработчик "+"
const plusHandler = (parent, counter) => {
  counter.value = +counter.value + 1 // тут просто прибавляем +1
}

// Сразу всем существующим кнопкам повешаем обработчик, чтобы менять "order" на кнопки с изменением кол-ва
document.querySelectorAll('.btn-order').forEach(elem => {
  elem.addEventListener('click', () => orderHandler(elem))
})

<div class="f1">
  <button class="btn btn-order">order</button>
</div>
<div class="f1">
  <button class="btn btn-order">order</button>
</div>
<div class="f1">
  <button class="btn btn-order">order</button>
</div>

const btns = document.querySelectorAll(".f1");
btns.forEach((el) => {
  el.addEventListener("click", (e) => {
    let target = e.target;
    //let btnOrder = target.querySelector('button');
    let btnOrder = el.querySelector('.btn-order'); // + добавлено
    if (target === btnOrder) {
      btnOrder.remove();
      //document.createElement("div");
      const blockQuantity = el // +
      const content = `<div class="quantity">
        <button class="minus">-</button>
        <input type="text" class="input" value="1">
        <button class="plus">+</button></div>`;
      blockQuantity.innerHTML = content;
      //target.append(blockQuantity);
      let plus = el.querySelector(".plus");
      let minus = el.querySelector(".minus");
      let result = el.querySelector("input");
      //Array.prototype.forEach.call(plus, function(element) {
      //  let plus = element;
        plus.addEventListener("click", (e) => {
          let span = plus.previousElementSibling;
          console.log(span);
          let oldValue = Number(span.value);
          let newVal = oldValue + 1;
          span.setAttribute("value", newVal);
        });
      //});
      //Array.prototype.forEach.call(minus, function(element) {
      //  let minus = element;
        minus.addEventListener("click", (e) => {
          let span = minus.nextElementSibling;
          let oldValue = Number(span.value);
          let newVal = oldValue - 1;
          span.setAttribute("value", newVal);
          if (newVal === 0) {
            //blockQuantity.remove();
            blockQuantity.innerHTML = `<button class="btn btn-order">order</button>` //+
          }
        });
      //});
    }
  });
});

<div class="f1">
  <button class="btn btn-order">order</button>
</div>
<div class="f1">
  <button class="btn btn-order">order</button>
</div>
<div class="f1">
  <button class="btn btn-order">order</button>
</div>

.flip {
  background: skyblue;
  margin: 1em;
  padding: .3em;
}

/*.flip:hover #i, - для edge, он с within не дружит вроде */
.flip:focus-within #i
  {transform: rotateX(0deg);}

#i {
  transform: rotatex(-90deg);
  transition: transform .5s;
  position: absolute;
  z-index: 7;
  left: 2em
}

<form
  class="flip"
  oninput='if(this.i.value < 0){
    this.i.blur(); this.i.value++
  }'>
    <label for='i'>я бы сделал так</label>
    <input id='i' type='number' value='0' min='-1'>
</form>