JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="occuredrooms" value="" onChange="updateTable()">
<table class="table">
    <tr>
        <td class="room active">001</td>
        <td class="room active">002</td>
        <td class="room active">003</td>
        <td class="room active">004</td>
    </tr>
    <tr>
        <td class="room active">005</td>
        <td class="room active">006</td>
        <td class="room active">007</td>
        <td class="room active">008</td>
    </tr>
    <tr>
        <td class="room active">009</td>
        <td class="room active">010</td>
        <td class="room inactive">011</td>
        <td class="room active">012</td>
    </tr>
</table>

CSS

.room.active{
        background-color: greenyellow;

    }
    .room.inactive{
        background-color: rgb(151, 49, 49);
    }

JavaScript

function updateTable(e){
  if(!document.getElementById('occuredrooms').value){
  		var x = document.getElementsByClassName('room');
      for(j=0;j<=x.length-1;j++){
          x[j].classList.remove('active');
          x[j].classList.add('inactive');
    }
  }
	let arr = document.getElementById('occuredrooms').value.split(' ');
  var x = document.getElementsByClassName('room');
  for (i = 0; i <= arr.length - 1; i++) {
    for(j=0;j<=x.length-1;j++){
      if(x[j].innerHTML==arr[i]){
        x[j].classList.add('active');
        x[j].classList.remove('inactive');
      }
    }
  }
}
  var x = document.getElementsByClassName('room');
    for(j=0;j<=x.length-1;j++){
        x[j].classList.remove('active');
        x[j].classList.add('inactive');
	}