jQuery: How to show next section if the first section has completed with valid input

Question

I am new to programming. I have got an issue with my jquery codes. I have a form that I want to hide some sections of it and do not show until the first section which is input text, be completed then after clicking on the next button first check if all data inputs are completed then show the next section which is dropdown text (part2) and if I pick one of the dropdown text then show next section which is part3.

I tried this code.

  <script>
    $(".part2").hide()
    $(".nextBtn").on("click", function(){
    $('input').each(function() { 
    if(!$(this).val()){ alert('Some fields are empty'); return false; }
    else{
    $(".part2").show();}
    
      });
    });
  </script>




         <div class="form">
               <div class="inputfield">
                   <label>First Name</label>
                   <input type="text" class="input" name="get[firstname]">
               </div> <br/>
               <div class="inputfield">
                   <label>Last Name</label>
                   <input type="text" class="input" name="get[lastname]">
               </div> <br/>
               <div class="inputfield">
                   <label>Email Address</label>
                   <input type="text" class="input" name="get[email]">
               </div>
               <div class="inputfield">
                   <label>Phone Number</label>
                   <input type="text" class="input" name="get[phone]">
               </div>

               <button  class="nextBtn">Next</button>

                <section class="part2">
                   <div class="inputfield">
                   <label for="text">Choose a text:</label>
                   <select name="text" id="text">
                       <option value="1">Text1</option>
                       <option value="2">Text2</option>
                   </select>
               </div>

               <section class="part3">
                   <div class="inputfield">
                   <label for="text">Choose a text:</label>
                   <select name="text" id="text">
                       <option value="1">Text1</option>
                       <option value="2">Text2</option>
                   </select>
               </div>

Thanks.

Answer 1

Wrap all in sections as part2 and part3 and try this, and include one next button in each section in order to know the section will have to show

$('.nextBtn').click(function(){
  if ($(this).closest('section').find('input').val() != '') {

    $('section').hide();
    $(this).closest('section').next().show();

 }else {
    console.log('Some fields are empty')
 }

})