<div class="wrap">
  <div class="place free">1</div>  
  <div class="place not-free">2</div>
  <div class="place not-free">3</div>
  <div class="place free">4</div>
  <div class="place not-free">5</div>  
  <div class="place free">6</div>
  <div class="place free">7</div>
  <div class="place free">8</div>
  <div class="place free">9</div>  
  <div class="place free">10</div>
  <div class="place free">11</div>
  <div class="place free">12</div>
  <div class="place free">13</div>  
  <div class="place not-free">14</div>
  <div class="place free">15</div>
  <div class="place not-free">16</div>
  <div class="place free">17</div>  
  <div class="place free">18</div>
  <div class="place free">19</div>
  <div class="place not-free">20</div>
</div>

<input class="input" type="text" readonly>

.wrap {
  display:flex;
  width: 300px;
  flex-wrap: wrap;
  box-sizing: border-box; 
}

.place {
  width: 70px;
  text-align: center;
  border: 1px solid #ccc;
  padding: 5px 0;
  box-sizing: border-box; 
}

.place:nth-child(4n+2) {
  margin-right: 20px;
}

.free {
  cursor: pointer;
}

.not-free {
  color: red;
}

.selected {
  color: green;
}

.input {
  width: 300px;
  box-sizing: border-box; 
  margin-top: 20px;
}

let freePlaces = document.querySelectorAll('.free');
let input = document.querySelector('.input');
    
for (let i = 0; i < freePlaces.length; ++i) {
    let place = freePlaces[i];
    place.onclick = function(e) {
        if (place.classList.contains('selected')) {
          place.classList.remove('selected');
          let array = input.value.split(', ');
          let indexArray = array.indexOf(place.textContent);
          if (indexArray !== -1) {
              array.splice(indexArray, 1);
          }
          input.value = array.join(', ');
        } else {
          place.classList.add('selected');
          input.value = input.value != '' ? input.value + ', ' : '';
          input.value = input.value + place.textContent;
        }
    }
};