JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1">
  <select id="L1" required>
        <option value="0">please select</option>
        <option value="A">A</option> 
        <option value="B">B</option> 
  </select>
  <select id="C1" required>
        <option value="0">please select</option>
        <option value="C">C</option> 
        <option value="D">D</option> 
  </select>
  <select id="D1" required>
        <option value="0">please select</option>
        <option value="E">E</option> 
        <option value="F">F</option> 
  </select>
  <button class="next">next</button>
 </div>
 <div id="div2" style="display:none">
  <select id="D2" required>
        <option value="0">please select</option>
        <option value="3">3</option> 
        <option value="4">4</option> 
  </select>
  <button class="next">next</button>
 </div>

JavaScript

$('.next').click(function(){   
	var reqField = true;	
  $(this).siblings('select').each(function(){
  	if($(this).val() === '0'){
    	reqField = false;
    }
  });
  
  if(reqField) {
  	$(this).closest('div').hide().siblings('div').show();
  }
});