JSFiddle - React, Tailwind, and code Playground

HTML

<div id="filters"></div>
<pre id="result"></pre>

CSS

label {
  margin: 10px;
}

JavaScript

const arr = [ 
  { name: 1, surname: 2, lastName: 3 }, 
  { name: 1, surname: 3, lastName: 4 },
  { name: 2, surname: 1, lastName: 4 },
];

const filters = document.querySelector('#filters');

filters.addEventListener('change', function() {
  const filterData = [...this.querySelectorAll('select')]
    .map(n => ({ prop: n.name, value: n.value }))
    .filter(n => n.value);

  const filtered = arr.filter(n => filterData.every(m => n[m.prop] == m.value));

  document.querySelector('#result').innerHTML = JSON.stringify(filtered, null, 2);
});

filters.innerHTML = Object.entries(arr.reduce((acc, n) => (
  Object.entries(n).forEach(([ k, v ]) => (acc[k] = acc[k] || new Set()).add(v)),
  acc
), {})).map(([ k, v ]) => `
  <label>
    ${k}:
    <select name="${k}">
      <option value="">-- select --</option>
      ${[...v].map(n => `<option>${n}</option>`)}
    </select>
  </label>
`).join('');

filters.dispatchEvent(new Event('change'));