JSFiddle - React, Tailwind, and code Playground

HTML

<select name="name" id="user-name">
  <option value="">Choose name</option>
  <option value="John">John</option>
  <option value="James">James</option>
  <option value="Jane">Jane</option>
</select>

<hr>

<div class="users">
  <div id="1">
    <p>
      name: Jane
      <br> age: 10
    </p>
  </div>
  <div id="2">
    <p>
      name: John
      <br>
      age: 13
    </p>
  </div>
  <div id="3">
    <p>
      name: James
      <br>
      age: 20
    </p>
  </div>
  <div id="4">
    <p>
      name: Jane
      <br>
      age: 30
    </p>
  </div>
</div>

JavaScript

const data = [{
    id: 1,
    name: 'Jane',
    age: 10,
  },
  {
    id: 2,
    name: 'John',
    age: 13,
  },
  {
    id: 3,
    name: 'James',
    age: 20,
  },
  {
    id: 4,
    name: 'Jane',
    age: 30,
  }
];

const userNameSelect = document.getElementById('user-name');

const renderData = (allUsers, idsToShow = []) => {
  if (idsToShow.length === 0) {
  	const usersElements = [...document.querySelectorAll('.users > div')];
    usersElements.forEach(element => {
    	element.hidden = false;
    });
    
    return;
  }

  allUsers.forEach(({
    id: userId
  }) => {
    const userElement = document.getElementById(userId);
    const isUserVisible = idsToShow.includes(userId);

    userElement.hidden = !isUserVisible;
  });
};

userNameSelect.addEventListener('change', e => {
  const {
    value
  } = e.target;
  const ids = data
    .filter(({
      name
    }) => name === value)
    .map(({
      id
    }) => id);

  renderData(data, ids);
});