PHP- How to add html table cell values to MYSQL Database

[akashmanujaya]

First of all I have an empty table(First, it only contain table headings)and 4 Input fields.if someone fill those 4 input fields and press Add medicine Button; the values of those 4 input fields come as first row of the table. if it done again the second row of the table will be filed up. This table contain 5th column which has a button to delete corresponding row. i want to tell that those two button are working perfectly. What i really want is, if some one finishes the row adding; all the row values should go to the database as rows. please guide me to do this.

add_prescrition.php

<form method="POST" >
<div class="row">
    <div class="col-md-4">
        <label for="fullName">Appointment Number</label>
        <div class="form-group">
            <div class="form-line">
                <input type="text" name="appNumber" id="appNumber" class="form-control" placeholder="Appointment Number" required="">
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <label for="nic">Patient's Name</label>
        <div class="form-group">
            <div class="form-line">
                <input type="text" name="pName" id="pName" class="form-control" placeholder="Patinet's Name">
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <label for="nic">Patient's Age</label>
        <div class="form-group">
            <div class="form-line">
                <input type="text" name="pAge" id="pAge" class="form-control" placeholder="Patient's Age">
            </div>
        </div>
    </div>
</div>

<div class="form-group">
    <!-- Multiple CKEditor -->
    <label for="nic">Present Complaint</label>
        <textarea name="pc" class="ckeditor"></textarea>
        <script type="text/javascript">
            CKEDITOR.replace( 'editor1' );
            CKEDITOR.add            
        </script>
        <br><br>
    <label for="nic">Examination</label>
    <textarea name="examination" class="ckeditor"></textarea>
        <script type="text/javascript">
            CKEDITOR.replace( 'editor2' );
            CKEDITOR.add            
        </script>
</div>

<label for="Treatment"><h4>Treatment</h4></label>

<div class="row">
    <div class="col-md-3">
        <label for="doctorName">Drug Name</label>
            <select id="drugId" class="form-control show-tick" data-live-search="true" name="drugId" id="doctorId">
                <option value="0"> Select Drug</option>
                 <?php $ret=mysqli_query($con,"select * from doctors");
                while($row=mysqli_fetch_array($ret))
                {
                ?>
                <option value="<?php echo htmlentities($row['id']);?>">
                    <?php echo htmlentities($row['doctorName']);?>
                </option>
            <?php } ?>
            </select>
    </div>
    <div class="col-md-3">
        <label for="nic">Dose</label>
        <div class="form-group">
            <div class="form-line">
                 <input type="text" name="dose" id="dose" class="form-control" placeholder="Eg: 1+0+1  2+0+2">
            </div>
        </div>
    </div> 
     <div class="col-md-3">
        <label for="nic">Days</label>
        <div class="form-group">
            <div class="form-line">
                 <input type="text" name="days" id="days" class="form-control" placeholder="Eg: 1, 2, 5">
            </div>
        </div>
    </div>  
    <div class="col-md-3">
        <label for="nic">External Medicine</label>
        <div class="form-group">
            <div class="form-line">
                <textarea rows="1" class="form-control no-resize auto-growth" placeholder="External Medicine" id="eMedicine"></textarea>
        </div>
        </div>
    </div>        
</div>
<input type="button" class="btn btn-success m-t-10 waves-effect" onclick="addRow();" value="Add Medicine">
<div class="body">
    <div class="table-responsive">
        <table class="table table-bordered table-striped table-hover dataTable js-exportable" name="drugTable" id="drugTable">
            <thead>
                <tr>
                    <th>Drug Name</th>
                    <th>Dose</th>
                    <th>Days</th>
                    <th>External Medicine</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<label for = 'docfee'>Doctor Fee</label>
<div class="form-group">
    <div class="form-line">
        <input type="text" name="docFee" id="docFee" class="form-control">
    </div>
</div>

<br><br><br><br>
<button class="btn btn-primary m-t-10 waves-effect" type="submit" name="submit">ADD PRESCRIPTION</button></form>

<script> 

    function deleteRow()
    {
        $('table').on('click', 'input[type="button"]', function(e){
           $(this).closest('tr').remove()
            })
    }

        function addRow()
        {
            // get input values
            var drugName = document.getElementById('drugId').value;
            var dose = document.getElementById('dose').value;
            var days = document.getElementById('days').value;
            var eMedicine = document.getElementById('eMedicine').value;
            var action = "<input type='button' class='btn btn-danger m-t-4 waves-effect' id='del' name='del' onclick='deleteRow()' value='DELETE'>";

              // get the html table
              // 0 = the first table
              var table = document.getElementsByTagName('table')[0];

              // add new empty row to the table
              // 0 = in the top 
              // table.rows.length = the end
              // table.rows.length/2+1 = the center
              var newRow = table.insertRow(table.rows.length);

              // add cells to the row
              var cel1 = newRow.insertCell(0);
              var cel2 = newRow.insertCell(1);
              var cel3 = newRow.insertCell(2);
              var cel4 = newRow.insertCell(3);
              var cel5 = newRow.insertCell(4);

              // add values to the cells
              cel1.innerHTML = drugName;
              cel2.innerHTML = dose;
              cel3.innerHTML = days;
              cel4.innerHTML = eMedicine;
              cel5.innerHTML = action;

              document.getElementById("drugId").value = "0";
              document.getElementById("dose").value = "";
              document.getElementById("days").value = "";
              document.getElementById("eMedicine").value = "";
        }

</script>

[Nubelle]

good work