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

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 >
               <div >
                   <label>First Name</label>
                   <input type="text"  name="get[firstname]">
               </div> <br/>
               <div >
                   <label>Last Name</label>
                   <input type="text"  name="get[lastname]">
               </div> <br/>
               <div >
                   <label>Email Address</label>
                   <input type="text"  name="get[email]">
               </div>
               <div >
                   <label>Phone Number</label>
                   <input type="text"  name="get[phone]">
               </div>

               <button  >Next</button>

                <section >
                   <div >
                   <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 >
                   <div >
                   <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.

CodePudding user response：

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')
 }

})