JSFiddle - React, Tailwind, and code Playground

HTML

<select id="dynamic_select">
  <option value="opt1">Display html block 1</option>
  <option value="opt2">Display html block 2</option>
  <option value="opt3">Display html block 3</option>
  <option value="opt4">Display html block 4</option>
</select>

<button onClick="filter()">Filter</button>

<div id="html_block_1">html_block_1</div>
<div id="html_block_2">html_block_2</div>
<div id="html_block_3">html_block_3</div>
<div id="html_block_4">html_block_4</div>

JavaScript

document.filter = function filter() {
if (document.getElementById('dynamic_select').value == 'opt1'){
   document.getElementById('html_block_1').style.display = 'block';
   document.getElementById('html_block_2').style.display = 'none';
   document.getElementById('html_block_3').style.display = 'none';           
   document.getElementById('html_block_4').style.display = 'none';
   }
if (document.getElementById('dynamic_select').value == 'opt2'){
   document.getElementById('html_block_2').style.display = 'block';
   document.getElementById('html_block_1').style.display = 'none';
   document.getElementById('html_block_3').style.display = 'none';           
   document.getElementById('html_block_4').style.display = 'none';
   }
if (document.getElementById('dynamic_select').value == 'opt3'){
   document.getElementById('html_block_3').style.display = 'block';
   document.getElementById('html_block_1').style.display = 'none';
   document.getElementById('html_block_2').style.display = 'none';           
   document.getElementById('html_block_4').style.display = 'none';
   }
if (document.getElementById('dynamic_select').value == 'opt4'){
   document.getElementById('html_block_4').style.display = 'block';
   document.getElementById('html_block_1').style.display = 'none';
   document.getElementById('html_block_2').style.display = 'none';           
   document.getElementById('html_block_3').style.display = 'none';
   }
}