JezK

Edit File: invoicesNew.php

<?php include("header.php"); ?>

<div class="container">
            <h4>Invoices</h4>
            <div class="containercontent">
            <div class="card-1 shadow-sm p-3 mb-5 bg-white rounded">
                <div class="card-body invoices_page_div">
                <div class="row">
                      <div class="col-md-2">
                          <label for="invoices">Invoices:</label>
                      </div>
                      <div class="col-md-2 ">
                       <input type="text" class="" id="invoices" placeholder="5858565" name="invoices">
                      </div>
                      <div class="col-md-2">
                          <label for="whnumber">WarehouseNumber:</label>
                      </div>
                      <div class="col-md-3">
                       <input type="text" class="" id="whnumber" placeholder="5858565" name="whnumber">
                      </div>
                      <div class="col-md-3 justify-content-end">
                          <div class="d-flex flex-row">
                          <label for="whnumber">Date:</label>
                         <span> <input type="text" class=" " id="whnumber" placeholder="5858565" name="whnumber"></span>
                       </div>
                      </div>
                      
                </div>
                <div class="row">
                <div class="col-md-2">
                          <label for="whname">WarehouseName:</label>
                      </div>
                      <div class="col-md-2">
                       <input type="text" class="" id="whname" placeholder="Agarwal Packers" name="whname">
                      </div>
                      <div class="col-md-2">
                          <label for="invoices">Invoice value:</label>
                      </div>
                      <div class="col-md-3">
                       <input type="text" class="" id="Invoicevalue" placeholder="180 Dinar" name="Invoicevalue">
                      </div>                 
                </div>
                <div class="row">
                <div class="col-md-2">
                          <label for="customer">Customer:</label>
                      </div>
                      <div class="col-md-2">
                       <input type="text" class="" id="customer" placeholder="Customer" name="customer">
                      </div>
                    </div>
                    <div class="row">
                   <div class="col-md-2">
                  <label for="whname">Description:</label>
                      </div>
                      <div class="col-md-2">
                       <input type="text" class="" id="description" placeholder="Description" name="description">
                </div>
            
</div>

<table class="table table-bordered table_body newRow_add">
                <thead class="theadcolor">
                        <tr>
                            <th>Invoice Number</th>
                            <th>Customer</th>
                            <th>Description</th>
                            <th>Quotation ID</th>
                            <th>Value</th>
                        	<th>Number of Pallet</th>
                        	<th>Quantity</th>
                       		<th>Price</th>
                        	<th>Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><input type="text"></td>
                            <td><input type="text"></td>
                            <td><input type="text"></td>
                            <td><input type="text"></td>
                            <td><input type="text"></td>
                        	<td><input type="text"></td>
                            <td><input type="text"></td>
                            <td><input type="text"></td>
                            <td><input type="text"></td>
                        </tr>
                    </tbody>
                </table>
                <button id="addRow">Add</button>&nbsp;&nbsp;<button id="addRowSave">Save</button>

</div>
</div>
         
    <?php include("footer.php"); ?>
<style>
.newRow_add tr td {
    padding: 0px !important;
}
.newRow_add tr td input{
   width:100% !important;border:none;background:#eaeffa;padding: 10px;border-bottom: 1px solid #3663c88c;
}
button#addRow ,button#addRowSave{
    background: #3663c8;
    border: none;
    padding: 5px 15px;
    color: #fff;
}
.invoices_page_div input {
    width: 100%;
    border: 1px solid #3663c8;
    border-radius: 5px;
    padding: 0px 5px;
}
</style>
 <script>
            	var counter = 1;
            $ = jQuery;
$('#addRow').click(function(event){
    event.preventDefault();
    counter++;
    var newRow = $('<tr><td><input type="text" name="first_name' +
        counter + '"/></td><td><input type="text" name="last_name' +
        counter + '"/></td><td><input type="text" name="last_name' +
        counter + '"/></td><td><input type="text" name="last_name' +
        counter + '"/></td><td><input type="text" name="last_name' +
        counter + '"/></td><td><input type="text" name="last_name' +
        counter + '"/></td><td><input type="text" name="last_name' +
        counter + '"/></td><td><input type="text" name="last_name' +
        counter + '"/></td><td><input type="text" name="last_name' +
        counter + '"/></td></tr>');
    jQuery('table.newRow_add').append(newRow);
});
            </script>