How to insert additional information when additional rows is added to database

Question

My script is able to add additional rows upon clicked. however, i can only get the first row's content to be stored in the database. how do i enable the other additional row's contents to be stored in the database too?

<script>
        function addRowToTable()
        {
            var tbl = document.getElementById('tblSample');
            var lastRow = tbl.rows.length;
            var iteration = lastRow;
            var row = tbl.insertRow(lastRow);

            // left cell
            var cellLeft = row.insertCell(0);
            var textNode = document.createTextNode(iteration);
            cellLeft.appendChild(textNode);

            // right cell
            var cellRight = row.insertCell(1);
            var el = document.createElement('input');
            el.type = 'text';
            el.name = 'time[]';
            el.id = 'txtRow' + iteration;
            el.size = 40;

            el.onkeypress = keyPressTest;
            cellRight.appendChild(el);

            // select cell
            var cellRightSel = row.insertCell(2);
            var sel = document.createElement('select');
            sel.name = 'date[]';
            sel.options[0] = new Option('Select a day', '');
            sel.options[1] = new Option('Monday', 'Monday');
            sel.options[2] = new Option('Tuesday', 'Tuesday');
            sel.options[3] = new Option('Wednesday', 'Wednesday');
            sel.options[4] = new Option('Thursday', 'Thursday');
            sel.options[5] = new Option('Friday', 'Friday');
            sel.options[6] = new Option('Saturday', 'Saturday');
            sel.options[7] = new Option('Sunday', 'Sunday');
            cellRightSel.appendChild(sel);
        }
</script>

this is a part of my html code:

<table border="1" id="tblSample" class="table table-bordered">
   <tr>
     <th colspan="5">Add Day and time
        <input type="button" class="btn-danger addright" value="Add" onclick="addRowToTable();" /> 
        <input type="button" class="btn-danger removeright" value="Remove" onclick="removeRowFromTable();" />
     </th>
    </tr>
    <tr>
   <td>1</td>
      <td><input type="text" name="time[]" id="txtRow1" size="40" placeholder="e.g 8:00am - 3:00pm" onkeypress="keyPressTest(event, this);" />   </td>
      <td>
      <select name="date[]">
       <option value="">Select a day</option>
       </select>
       </td>
      </tr>
 </table>

Answer 1

                $timeArr = $_POST['time'];
                $dateArr = $_POST['date'];
                //count the array
                for ($i = 0; $i < count($timeArr); $i++) {
                    $datetimeoption = new datetimeoption();
                    $datetimeoption->prefer_day = $dateArr[$i];
                    $datetimeoption->prefer_time = $timeArr[$i];
                    //Insert data into database
                    $result = $datetimeoption->createdatetime();
                }