multistep form with fieldset is not going to next fieldset even if required field is filled

Question

I have a multistep form with fieldset, but on the next button click, it is not going to the next step it still shows the required field is empty.

Blade

<form id="msform" autocomplete="off" method="POST" action="#" enctype="multipart/form-data">
     <ul id="progressbar">
        <li class="active" id="basic"><strong>Basic details</strong></li>
        <li id="address"><strong>Address</strong></li>
     </ul> 
     <fieldset id="fieldset1">
         <div class="row">
              <div class="form-group input-group">
                   <span class="has-float-label">
                        <input type="text" id="fname" class="form-control" name="fname" required placeholder="First Name" />
                        <label for="fname">First Name<span class="text-danger">*</span></label>
                   </span>
              </div>
         </div>
         <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>

    <fieldset id="fieldset2">
             <div class="row">
              <div class="form-group input-group">
                   <span class="has-float-label">
                        <input type="text" id="uemail" class="form-control" name="uemail" required placeholder="Email" />
                        <label for="uemail">Email<span class="text-danger">*</span></label>
                   </span>
              </div>
         </div>
         <input type="button" name="next" class="next action-button" value="Next" />
         <input type="button" name="previous" class="previous action-button-previous" value="Previous" />
    </fieldset>
</form>

js

$(document).ready(function () {

var current_fs, next_fs, previous_fs; //fieldsets

$(".next").click(function () {

    current_fs = $(this).parent();
    next_fs = $(this).parent().next();

    let valid = true;
    
    $('fieldset').find('[required]').each(function () {
        if ($(current_fs ).is(':invalid') || !$(current_fs ).val()) valid = false;
    })

    if (valid == false) {
        //alert("error please fill all * fields!");
        console.log("required field is blank");
    }
    else {
        console.log("required field is filled");

        //show the next fieldset
        //next_fs.show();
        //hide the current fieldset with style  blahhhh                
    }

  });
});

the above code is printing "required field is blank" even if I input into the input field.

what's wrong with this code? any suggestion will be helpful. ありがとうございます