JSFiddle - React, Tailwind, and code Playground

by Sergei Sokolov

HTML

<div class="container">
  <div class="table-item" id="1">1</div>
  <div class="table-item" id="2">2</div>
  <div class="table-item" id="3">3</div>
  <div class="table-item" id="4">4</div>
  <div class="table-item" id="5">5</div>
  <div class="table-item" id="6">6</div>
  <div class="table-item" id="7">7</div>
  <div class="table-item" id="8">8</div>
  <div class="table-item" id="9">9</div>
  <div class="table-item" id="10">10</div>
  <div class="table-item" id="11">11</div>
  <div class="table-item" id="12">12</div>
  <div class="table-item" id="13">13</div>
  <div class="table-item" id="14">14</div>
  <div class="table-item" id="15">15</div>
</div>

<textarea id="search" type="number" value=""></textarea>


$

CSS

div.container {
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
}

div.container > div {
  width: 50px;
  height:50px;
  border:1px solid #ccc;
}
div.container > div.-active {
  background-color: red;
  color: white;
}

JavaScript

/**
 * для вопроса https://qna.habr.com/q/797969
 * Как сделать поиск нескольких div с id через textarea?
 */
$('#search').on('input', function(){ // При вводе текста..
  $('.table-item.-active').removeClass('-active'); // убираем класс .-active у .block.-active
  const ids = $(this).val().split(/[ ,]/).filter(el => el.length);
  for (let id of ids) {
	  $(`.table-item[id="${id}"]`) // берём блок у которого есть совпадение по id
      .addClass('-active'); // выдаём ему класс .-active
  }
});