Найти данные, сравнить, если совпадает, заменить js

let arr = [];
/*этот массив будет хранить idишники кнопок на которые пользователь уже нажал*/
let comments = document.querySelector('.clickers-parent');
let tt = document.querySelector('.tt');

comments.onclick = function(event) {
  /* Используя подход: "Делегирование событий", ловлю клик не по элементам с классами clicker, но по их родительскому элементу с классом: clickers-parent.  */
  event.preventDefault(); //на всякий случай отменяю стандартное поведение элемента при клике

  let clicker_prod_id = +event.target.closest('[data-action="add-info"]').querySelector('.prod_id').id;
  /* нужно  получить id кнопки, на которую пользователь нажал, получаю его и преобразую в тип: number*/

  if (arr.includes(clicker_prod_id)) {
    /*если такой id уже был добавлен в массив arr раньше, значит уже создан элемент содержащий в себе input с атрибутом data-bind-prod-id равным clicker_prod_id*/

    let input_node_list = tt.querySelectorAll('input[data-bind-prod-id]');
    /*если бы я знал, как обратиться к элементу input[data-bind-prod-id="clicker_prod_id"], то обратился бы к нему напрямую, но не знаю поэтому получаю nodelist*/

    for (let elem of input_node_list) {
      /*nodelist, содержащий интересующий меня элемент, есть. Теперь пройдусь по нему циклом и найду-таки этот элемент: input[data-bind-prod-id="clicker_prod_id"]*/
      let elem_attr = +elem.getAttribute('data-bind-prod-id');
      if (elem_attr === clicker_prod_id) { //нашел
        elem.setAttribute('value', +elem.getAttribute('value') + 1);
        /* а теперь увеличу value на 1 */

        break; //т.к нужный элемент найден, выхожу из цикла, чтобы не делать ненужные итерации
      }
    }

  } else {
    //такой id не был добавлен в массив, значит элемента, содержащего в себе input с атрибутом data-bind-prod-id равным clicker_prod_id не существует и его нужно создать
    let div = document.createElement('div');
    div.className = "col-xl-14";

    div.insertAdjacentHTML("afterbegin", `<div class="card card-body alert-yellow border-yellow"><div class="media"><div class="media-body"><div class="prodID" style="display:none;">${clicker_prod_id}</div><div class="col-xl-12 input-group bootstrap-touchspin bootstrap-touchspin-injected"><input type="text" data-obj="quantity" data-bind-prod-id="${clicker_prod_id}" value="1" class="form-control touchspin-step alert-yellow"></div></div></div></div>`);
    /* Есть все основания полагать, что существует более разумный способ внедрения такой портянки на страницу, но смог пока только так */

    tt.append(div); //элемент существует, но на страницу пока не добавлен, добавляю его

    arr.push(clicker_prod_id);
    /*добавляю idишник нажатой кнопки в массив arr, чтобы при дальнейших нажатиях на кнопку обращаться к массиву arr и проверять, нажималась ли уже эта кнопка или нет*/

  }

};

.clickers-parent {
  display: flex;
  width: 100px;
}

.clicker {
  width: 50%;
  margin: 0 10px;
  border: 1px solid #b7b7b7;
  border-radius: 5px;
  text-align: center;
  padding: 5px 36px;
  background: #e2e2e2;
  cursor: pointer;
  transition: 0.2s;
  user-select: none;
}

.clicker:hover {
  background: #d6d6d6;
}

<div class="clickers-parent">
  <div class="clicker" data-action="add-info">
    <div class="card">
      <div class="card-body">
        <div class="media">
          <div class="media-body">
            <div class="prod_id" id="1">push me</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="clicker" data-action="add-info">
    <div class="card">
      <div class="card-body">
        <div class="media">
          <div class="media-body">
            <div class="prod_id" id="2">and me</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="tt">
</div>

const $tt = document.querySelector(`.tt`);

addEventListener(`click`, e => {
  const $target = e.target.closest(`[data-id]`);
  if (!$target) return;
  const $id = document.getElementById(`id-${$target.dataset.id}`);
  if ($id) $id.querySelector(`input`).value = $id.dataset.count = +$id.dataset.count + 1;
  else $tt.insertAdjacentHTML(`beforeend`, `<div class="count" id="id-${$target.dataset.id}" data-count="1"><input type="text" value="1"></div>`);
})

.clickers-parent {
  display: flex;
  width: 100px;
}

.clicker,
.count {
  width: 50%;
  margin: 0 10px;
  border: 1px solid #b7b7b7;
  border-radius: 5px;
  text-align: center;
  padding: 5px 36px;
  background: #e2e2e2;
  cursor: pointer;
  transition: 0.2s;
  user-select: none;
}

.clicker:hover {
  background: #d6d6d6;
}

<div class="clickers-parent">
  <div class="clicker" data-action="add-info" data-id="1">
    <div class="card">
      <div class="card-body">
        <div class="media">
          <div class="media-body">
            <div class="prod_id" id="1">push me</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="clicker" data-action="add-info" data-id="2">
    <div class="card">
      <div class="card-body">
        <div class="media">
          <div class="media-body">
            <div class="prod_id" id="2">and me</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="tt">
</div>