Делегирование JavaScript

let all = document.getElementById('block');

const imgs = document.querySelectorAll('.img')

for (let i = 0; i < imgs.length; i++) {
  imgs[i].addEventListener('click', function() {
    let btn = this.querySelector('.arrow');
    let moreText = this.querySelector('.more');
    let changeMain = this.querySelector('.text');
    let changeSpan = this.querySelector('.text-span');
    btn.classList.toggle('arrow-for');
    changeMain.classList.toggle('for-main', );
    changeSpan.classList.toggle('for-main');

    if (moreText.style.display === 'none') {
      moreText.style.display = 'block';
      btn.innerHTML = '<i class="fa fa-times" style="color: black"></i>';
    } else {
      moreText.style.display = 'none';
      btn.innerHTML = 'Know more <i class="fa fa-arrow-right"></i>';
    }
  })
}

.img h6,
.img span {
  padding-left: 50px;
  position: absolute;
  color: #f7f7f7;
  padding-top: 230px;
  width: 90%;
}

.img span {
  padding-top: 260px;
  font-size: 15px;
}

.img .arrow {
  padding-top: 360px;
  cursor: pointer;
}

.arrow-for {
  background-color: #b2f2ee;
  transition: ease 0.2s;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
}

#more {
  position: relative;
  z-index: 3;
  color: black;
}

.for-main {
  z-index: 3 !important;
  position: relative;
  color: black !important;
  margin-top: -250px;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -webkit-transform: translate(0, 50px);
  -moz-transform: translate(0, 50px);
  -o-transform: translate(0, 50px);
}

    <div class="content" id="block">
      <div class="img">
        <h6 class="text-uppercase font-weight-bold text-left text for-main">
          Designing is the cool love for.
        </h6>
        <span class="text-span"
          >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum
          libero odio soluta. Autem debitis, exercitationem maxime praesentium
          quaerat repudiandae sit...
          <p class="more" style="display: none;">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid
            architecto at aut beatae, consectetur dicta dolore ducimus ea
            eligendi enim eum expedita explicabo incidunt iure labore magnam
            neque provident saepe sit soluta suscipit tempora totam vel vitae
            voluptas voluptatem voluptatum. Earum eveniet facilis praesentium
            repudiandae? Ab assumenda doloremque dolorum
          </p></span
        >
        <span class="text-uppercase arrow"
          >Know more <i class="fa fa-arrow-right"></i
        ></span>
        <img src="http://i.yapx.ru/IM7a6.png" alt="image" />
      </div>
      <div class="img">
        <h6 class="text-uppercase font-weight-bold text-left text">
          Designing is the cool love for.
        </h6>
        <span class="text-span"
          >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum
          libero odio soluta. Autem debitis, exercitationem maxime praesentium
          quaerat repudiandae sit...
          <p class="more" style="display: none;">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid
            architecto at aut beatae, consectetur dicta dolore ducimus ea
            eligendi enim eum expedita explicabo incidunt iure labore magnam
            neque provident saepe sit soluta suscipit tempora totam vel vitae
            voluptas voluptatem voluptatum. Earum eveniet facilis praesentium
            repudiandae? Ab assumenda doloremque dolorum
          </p></span
        >
        <span class="text-uppercase arrow"
          >Know more <i class="fa fa-arrow-right"></i
        ></span>
        <img src="http://i.yapx.ru/IM7a4.png" alt="image" />
      </div>
    </div>

// Выбираем общий родительный контейнер
const container = document.querySelector('.container');

// Вешаем на контейнер обработчик клика
container.addEventListener('click', e => {
  // Выбираем элемент с классом block, дальше мы будем с ним работать, важно подметить, что выбор идёт через передаваемый аргумент event.target от обработчика события
  const block = e.target.closest('.block');
  
  // Проверяем, если клик был совершен не по элементу с классом block, то отменяем действие
  if (!block) return;
  
  // Выбираем элемент с классом block-description того элемента, на который кликнули
  const description = block.querySelector('.block-description');
  
  // Выводим результат
  console.log(description.innerText);
});

.container {
  display: flex;
  flex-flow: row wrap;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}

.block {
  box-sizing: border-box;
  width: 50%;
  border: 1px solid red;
  padding: 30px;
  cursor: pointer;
}

<div class="container">
  <div class="block">
    <div class="block-description">This is description of block #1</div>
  </div>
  
  <div class="block">
    <div class="block-description">This is description of block #2</div>
  </div>
</div>