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>

<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();

tab.addEventListener("focusin", event => {
  const target = event.target;
  [item.value, description.value] = [
    text(".item-name", target),
    text(".description", target)
  ];
});

tab.addEventListener("focusout", event => {
  if (!tab.contains(event.relatedTarget))
    [item.value, description.value] = [
      text(".item-name"),
      text(".description")
    ];
});