How to submit all the values of this form as an array and loop through when posting to SQL db?

Question

I have a form with some textinputs which I want to submit to db after filling them out. I am a newbie to PHP so I dont know how to save all the values into an array and submit.

Here is my table wrapped in a form:

<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
        </br>
        <form action="" method="post">
            <div id="wrapper">
                <button type="submit" class="btn" name="add_device">Add devices</button>
            </div>
            </br>
            <table id="ble_table" class="table table-bordered table-striped" cellspacing="0" width="100%">
                <tr>
                    <th>No.</th>                    
                    <th>Serial no.</th>
                    <th>IMEI</th>                    
                </tr>
                <tr>
                    <td>1</td>                        
                    <td><input type="text" placeholder="Serial no." class="inputs" name="serial_no" id="serial_no" /></td>
                    <td><input type="text" placeholder="IMEI" class="inputs lst" name="imei" id="imei" /></td>
                </tr>
            </table>
        </form>
    </form>

jquery for adding new rows when clicking enter:

 var i = $('table tr').length;
    $(document).on('keyup', '.lst', function(e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if (code == 13) {
            html = '<tr>';
            html += '<td>' + i + '</td>';
                html += '<td><input type="text" class="inputs" name="serial_no' + i + '" id="serial_no' + i + '" /></td>';
                html += '<td><input type="text" class="inputs lst" name="imei' + i + '" id="imei' + i + '" /></td>';
            html += '</tr>';
            $('table').append(html);
            $(this).focus().select();
            i++;
        }
    });

    $(document).on('keydown', '.inputs', function(e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if (code == 13) {
            var index = $('.inputs').index(this) + 1;
            $('.inputs').eq(index).focus();
            event.preventDefault();
        }
    });

One very important thing to know: this is a dynamic table, so when pressing enter I am actually creating a new row(see jquery function).

EDIT:

Printing $_POST gives me this:

Array ( [0] => serial1 ) Array ( [0] => imei1 ) serial2imei2serial3imei3serial4imei4

I am looping like this:

$myArray = $_POST;
foreach ($myArray as $index) {
    print_r($index);       
}

Edit Prepared statement:

$serial_no = e($_POST['serial_no']);
$imei = e($_POST['imei']);
$entrycount = count($serial_no);
$sales_date = date("'Y-m-d H:i:s'");
$cus_id = "1";

$stmt = $db->prepare("INSERT INTO devices (serial_imei,serial_no,type_id,cus_id,sales_date) VALUES (?,?,?,?,?)");
for ($loop = 1; $loop <= $entrycount; $loop++) {
    $stmt->execute([$imei[$entrycount]], [$serial_no[$entrycount]], 1, $cus_id, $sales_date);
}
$pdo->commit();

Answer 1

Your form will post 2 arrays that contain the values of serial and imei from your form. After you've verified that they have the same number of entries you just need to loop through one of them to extract the values from both arrays and insert them into your database.

Since your question did not include anything related to your database connection I can only show you the variables that you will use to insert the data into your DB. Use PDO and prepare the insert before entering the loop (here's a good reference to get you going with PDO and prepare).

$serial_no  = $_POST['serial_no'];
$imei       = $_POST['imei'];
$entrycount = count($serial_no);

for ($loop = 1;$loop <= $entrycount; $loop++) {

    // 
    // The values from your form will be in the following variables:
    //
    //
    // $serial_no[$entrycount]
    // $imei[$entrycount]
    //
    // The variables shown above are what you will have to insert into your DB.
    //
}