<div class="img-slider">
      <div class="row">
        <div class="col-xl-3 item">
          <img src="https://vignette1.wikia.nocookie.net/callofduty/images/d/d0/Elmo_150px.png/revision/latest?cb=20120118200227" alt="">
          <input type="text" class="form-control">
        </div>
        <div class="col-xl-3 item">
          <img src="https://vignette1.wikia.nocookie.net/callofduty/images/d/d0/Elmo_150px.png/revision/latest?cb=20120118200227" alt="">
          <input type="text" class="form-control">
        </div>
        <div class="col-xl-3 item">
          <img src="https://vignette1.wikia.nocookie.net/callofduty/images/d/d0/Elmo_150px.png/revision/latest?cb=20120118200227" alt="">
          <input type="text" class="form-control">
        </div>
        <div class="col-xl-3 item">
          <img src="https://vignette1.wikia.nocookie.net/callofduty/images/d/d0/Elmo_150px.png/revision/latest?cb=20120118200227" alt="">
          <input type="text" class="form-control">
        </div>
      </div>
    </div>

.img-slider {
  .item {
    border: 1px solid #999;
    img {
      max-width: 150px;
    }
    .form-control {
      display: none;
    }
  }
}

const wrapperSpoiler = () => {
      const wrapperImgBox = document.querySelector('.img-slider');
      if(!wrapperImgBox){
          return;
        }
        const allInput = wrapperImgBox.querySelectorAll('input');/*скрывать все инпуты при открытии другого */
        const item = wrapperImgBox.querySelectorAll('.item');

        item.forEach(function(e){
          const img = e.querySelector('img');
          const input = e.querySelector('input');
          input.style.display = 'none';
          img.addEventListener('click',function(){
            if(input.style.display === 'none'){
              /*скрывать все инпуты при открытии другого, убрать можно и будет открывать все и закрывать по отдельности каждый*/
              allInput.forEach(function(a){
                a.style.display = 'none';
              });
              /*--*/
              input.style.display = 'block';
            } else {
              input.style.display = 'none';
            }
          });
        });        
      }

document.addEventListener("DOMContentLoaded", wrapperSpoiler);