HTML/PHP Form Doesn't Submit - php

Question

I have created a form for something i call a site survey. Before i had the form one one page. But decided to spread it across three html/css tabs. At first it did let me submit to a MySQL db. But I didn't make a backup of a working example with the tabs as it wasn't fully what I wanted yet.
Now it glitches and wont create a new record in the db
Problem
I fill in the first part of the form which works Okay. I click next to send me to the next tab. and go to fill in the rest of the form. I am instantly seeing one of the "please fill out this field" because it is "required" in the code. Once filled, i press the next button again. Which this then takes me to the next tab but then instantly to the first tab and refreshes everything
The next and previous buttons work and dont glitch when there are no answers entered into the fields
I have no idea how to solve the problem. Which is why I'm seeing if anyone can help.
edit
I changed the button to an A tag like the "previous" a tag does. This stops the glitches. However the form does not submit...
Function for the Next/Previous button to work -
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$('.next-button').click(function(){
$('.nav-tabs > .active').next('li').find('a').trigger('click');
//trigger the click on the tab same like we click on the tab
});
$('.previous-button').click(function(){
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
//trigger the click on the tab same like we click on the tab
})
</script>
HTML Code -
<div class="row"> <!-- 2 -->
<form class="row g-3" action="<?= $data['action'] ?>" method="post"><!-- 3 -->
<div class="col-sm-12 survey-tabs"> <!-- 4 -->
<ul class="nav nav-tabs" hidden>
<li class="active">Contact & Site Details</li>
<li class="">Questions</li>
<li class="">Site Details</li>
</ul>
<div class="tab-content"><!-- 5 -->
<div class="tab-pane active" id="tab1">
<h1>Contact & Site Details</h1>
<div class="row"> <!-- START TAB ROW 1 -->
<div class="col-md-7">
<label for="site_name" class="form-label">Site Name*</label>
<input type="text"
class="form-control"
id="site_name"
name="site_name"
value="<?= $data['record']['site_name'] ?? '' ?>"
placeholder="Enter Site Name"
required><br>
</div>
<div class="col-md-5">
<label for="poNum" class="form-label">PO Number*</label>
<input type="text"
class="form-control"
id="poNum"
name="poNum"
value="<?= $data['record']['poNum'] ?? '' ?>"
placeholder="Enter PO Num (Given in Email)"
required>
</div>
<div class="tab-control">
<a class="next-button" role="button"><button class="btn btn-primary">Next</button></i></a>
</div>
</div>
<!---------------------------------------------------------------------------------------------------------------------------------------->
<div class="tab-pane" id="tab2">
<h1>Questions</h1>
<div class="row"><!-- START TAB ROW 2 -->
<div class="col-12">
<h6 for="current_machine">1. What is your Current Machine?</h6>
<input type="text"
class="form-control"
id="current_machine"
name="current_machine"
value="<?= $data['record']['current_machine'] ?? '' ?>"
placeholder="Leave blank if none"><br>
</div>
<div class="col-12">
<h6 for="ordered_machine">2. What Machine did you Order?*</h6>
<input type="text"
class="form-control"
id="ordered_machine"
name="ordered_machine"
value="<?= $data['record']['ordered_machine'] ?? '' ?>"
placeholder="Machine(s) Ordered"
required> <br>
</div>
</div> <!-- END TAB ROW 2 -->
<div class="tab-control">
<a class="previous-button" role="button"><i class="fa fa-angle-left fa-3x fa-fw"></i></a>
<a class="next-button" role="button"><button class="btn btn-primary">Next</button></i></a>
</div>
</div>
<!---------------------------------------------------------------------------------------------------------------------------------------->
<div class="tab-pane" id="tab3">
<h1>Site Details</h1>
<div class="row"><!-- START TAB ROW 3 -->
<div class="col-12">
<h6 for="q7">9. What floor is the Machine(s) going to be located on?</h6>
<input type="text"
class="form-control"
id="q7"
name="q7"
value="<?= $data['record']['q7'] ?? '' ?>"
placeholder="Please enter what floor your machine will be located on"> <br><br>
</div>
</div> <!-- END TAB ROW 3 -->
<div class="tab-control">
<a class="previous-button" role="button"><i class="fa fa-angle-left fa-3x fa-fw"></i></a>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary mb-3"><?= $data['button'] ?></button>
</div>
</div>
</div><!-- 5 -->
</div><!-- 4 -->
</form><!-- 3 -->
</div> <!-- 2 -->
</div><!-- 1 -->