Buss fiddle

by Bryson Murray

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="busses">
</div>

CSS

.busSet{
  display: inline-block;
  vertical-align: top;
  border: 1px solid;
  padding: 5px;
}
.number {
  display: inline-block;
  /* margin: 5px; */
  padding: 2pt 5px;
  cursor: pointer;
}
.highlight {
  color: red;
}

JavaScript

const numberOfBuses = 8;
const passengers = 40;

busPassengers(4,passengers);
busPassengers(8,passengers);
busPassengers(12,passengers);
busPassengers(16,passengers);
busPassengers(24,passengers);
busPassengers(28,passengers);

busPassengers(5,passengers);
busPassengers(10,passengers);
busPassengers(15,passengers);
busPassengers(20,passengers);
busPassengers(25,passengers);
busPassengers(30,passengers);

setupHighlight();
setupHighlight();

function busPassengers(numBusses, numPassengers){
  const buses = Array.from({ length: numBusses }, () => []);

  for (let passenger = 1; passenger <= numPassengers; passenger++) {
    const busNumber = (passenger - 1) % numBusses;
    buses[busNumber].push(passenger);
  }
	
  var busSet = "busSet"+numBusses;

  $("#busses").append("<div class='busSet' id='"+busSet+"'></div>")
  $("#"+busSet).append("<div>"+numBusses+" Busses </div>");
  buses.forEach((bus, index) => {
    var bus = "<div class='bus'> Bus " + (index + 1) + " : <div class='number'>" + bus.join('</div><div class="number">') + "</div></div>";
    $("#"+busSet).append(bus);
  });
  $("#"+busSet).append("</div>");
}

function setupHighlight(){
  document.querySelectorAll('.number').forEach(number => {
    number.addEventListener('mouseover', () => {
      const value = number.textContent;
      document.querySelectorAll('.number').forEach(n => {
        if (n.textContent === value) {
          n.classList.add('highlight');
        }
      });
    });

    number.addEventListener('mouseout', () => {
      document.querySelectorAll('.number').forEach(n => {
        n.classList.remove('highlight');
      });
    });
  });
}