JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tab">
  <div class="hoge" tabindex="1">
    <p class="item-name">Section 1</p>
    <p class="description">description 1</p>
  </div>

  <div class="hoge" tabindex="2">
    <p class="item-name">Section 2</p>
    <p class="description">description 2</p>
  </div>

  <div class="hoge" tabindex="3">
    <p class="item-name">Section 3</p>
    <p class="description">description 3</p>
  </div>

  <div class="hoge" tabindex="4">
    <p class="item-name">Section 4</p>
    <p class="description">description 4</p>
  </div>
  <div class="hoge" tabindex="5">
    <p class="item-name">Section 5</p>
    <p class="description">description 5</p>
  </div>
</div>

<input type="text" value="Section 1" id="input-item">
<input type="text" value="description 1" id="input-description">

JavaScript

const tab = document.querySelector(".tab");
const item = document.getElementById("input-item");
const description = document.getElementById("input-description");

const text = (selector, target = tab.firstElementChild) =>
  target.querySelector(selector).textContent.trim();

document.addEventListener("DOMContentLoaded", () => {
  tab.firstElementChild.style.background = "red";
});

tab.addEventListener("focusin", event => {
  const target = event.target;
  [item.value, description.value] = [
    text(".item-name", target),
    text(".description", target)
  ];
  [...target.parentElement.children].map(e => {
    e.style.background = e == target ? "red" : "initial"
  });
});