How to insert multiple rows in MySQL using PHP PDO

config.php

<?php
 $servername = "localhost";
 $username = "root";
 $password = "";
 $dbname = "student_record";
 // Create connection 
$conn = new mysqli($servername, $username, $password,$dbname);
 // Check connection
 if ($conn->connect_error) { 
  die("Connection failed: " . $conn->connect_error);
 }
 ?> 

index.php

<?php 
include 'config.php';
error_reporting(0);
if(isset($_POST['submit'])){
$qualificationArr = $_POST['qualification'];
$subjectArr = $_POST['subject'];
$universityArr = $_POST['university'];
$passingyearArr = $_POST['passingyear'];
$percentageArr = $_POST['percentage'];
    
    if(!empty($qualificationArr)){
        for($i = 0; $i < count($qualificationArr); $i++){
            if(!empty($qualificationArr[$i])){
                $qualification = $qualificationArr[$i];
                $subject = $subjectArr[$i];
                $university = $universityArr[$i];
                $passingyear = $passingyearArr[$i];
                 $percentage = $percentageArr[$i];
               $sql="INSERT INTO studentrecord (qualification, subject, university, passingyear, percentage)  Values('".$qualification."','".$subject."','".$university."','".$passingyear."','".$percentage."')";
if ($conn->query($sql) === TRUE) 
{ 
    echo "New record created successfully";
 }
  else
 {
     echo 'Record not successfully';
 }

  }	

    }
       }
	       }		
?>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="container"> 
	<form method="post">
                        <div class="row">
                                    <div class="col-lg-12 col-12">
			<table class="table table-bordered table-hover" id="tab_logicQual">
				<thead>
					<tr >
						<th class="text-center">
							#
						</th>
						<th class="text-center">
							Degree<span class="str"><font color="red">*</font></span>
						</th>
						<th class="text-center">
							Subject<span class="str"><font color="red">*</font></span>
						</th>
						<th class="text-center">
							College/University<span class="str"><font color="red">*</font></span>
						</th>
						<th class="text-center">
							Year of Passing<span class="str"><font color="red">*</font></span>
						</th>
						<th class="text-center">
							Percentage/Grade<span class="str"><font color="red">*</font></span>
						</th>
					</tr>
				</thead>
				
				<tbody>
					<tr id='addrQual0'>
						<td>
						1
						</td>
					
						<td>
						<input type="text" name='qualification[]'  placeholder='Qualification' class="form-control"/>
						</td>
						<td>
						<input type="text" name='subject[]' placeholder='subject' class="form-control"/>
						</td>
						<td>
						<input type="text" name='university[]' placeholder='university' class="form-control"/>
						</td>
						<td>
						<input type="date" name='passingyear[]' placeholder='passingyear' class="form-control"/>
						</td>
						
						<td>
						<input type="text" name='percentage[]' placeholder='percentage/grade' class="form-control" />
						</td>
					
					  
					
					</tr>
                    <tr id='addrQual1'></tr>
				</tbody>
				
			
			</table>
		

		<a id="add_row2" class="btn btn-primary pull-left" style=" background-color: #0d469b; color: white; padding: 3px 8px; text-align: center;display: inline-block; font-size: 16px;cursor: pointer;">Add More</a>	<a id='delete_row2' class="pull-right btn btn-primary" style="background-color: #0d469b; color: white; padding: 3px 8px; text-align: center;display: inline-block; font-size: 16px;cursor: pointer; float: right;">Remove</a>
		    
					<div class="clearfix"></div>
					
		</div>	

		<div class="text-center">
                                <input type="submit" name="submit" class="btn btn-primary btn-marketing mt-4" value="Submit" onClick="return encrypt()">
         </form>                            </div>
</div>
		<script>
 $(document).ready(function(){
    var i=1;
   $("#add_row2").click(function(){
    $('#addrQual'+i).html("<td>"+ (i+1) +"</td><td><input name='qualification["+i+"].qualification' type='text' placeholder='Qualification' class='form-control input-md'/> </td><td><input  name='subject["+i+"].subject' type='text' placeholder='Subject'  class='form-control input-md'></td><td><input  name='university["+i+"].university' type='text' placeholder='College'  class='form-control input-md'></td><td><input  name='passingyear["+i+"].passingyear' type='date' placeholder='Passing Year'  class='form-control input-md'></td><td><input  name='percentage["+i+"].percentage' type='text' placeholder='Grade/Percentage'  class='form-control input-md'></td>");

    $('#tab_logicQual').append('<tr id="addrQual'+(i+1)+'"></tr>');
    i++; 
});
   $("#delete_row2").click(function(){
  	 if(i>1){
		 $("#addrQual"+(i-1)).html('');
		 i--;
		 }
	 });

}); 
</script>