JSFiddle - React, Tailwind, and code Playground

by Dmitri Ganenco

HTML

<form name="order" id="order">

<label>Invoice Number</label>
    <input type="text" name="invoicenumber" value="">
<p><label>Vendor's ID</label>
<select name="vendorid" >

<?php

    $stmt = $dbcon->prepare("SELECT * FROM customers");
    $stmt->execute(); 
    while ($row=$stmt->fetch(PDO::FETCH_ASSOC)) {
        extract($row);
        ?>

        <option value=" <?php echo $id; ?> "><?php echo $vendorname; ?></option>

<?php
    } ?>
    </select> </p>

<table class="table table-bordered" id="dynamic_field">

    <!-- Product code begining -->

    <td><tr><label>Items sold</label>
    <select name="proid[]" >

<?php

    $stmt = $dbcon->prepare("SELECT * FROM products");
    $stmt->execute(); 
    while ($row=$stmt->fetch(PDO::FETCH_ASSOC)) {
        extract($row);
        ?>

        <option value=" <?php echo $pid; ?> "><?php echo $pname; ?></option>

<?php
    } ?>
    </select> </td>

    <td><label>Quantity</label>
    <input type="text" name="tquantity[]" value=""></td>

    <td><label>Price</label>
    <input type="text" name="saleprice[]" value=""></td>

    <td><button name="add" id="add" class="btn btn-success">ADD MORE</button></td></tr>
    </table>
    <!-- Product code END -->


    <input type="submit" name="submit" value="submit">
</form>

<!--Jquery code to add more fields -->
<script>
$(document).ready(function(){
    var i = 1;
    $(#add).click(function(){
        i++;
        $(#dynamic_field).append('<tr id="row'+i+'"><td>
    <select name="proid[]" >

<?php

    $stmt = $dbcon->prepare("SELECT * FROM products");
    $stmt->execute(); 
    while ($row=$stmt->fetch(PDO::FETCH_ASSOC)) {
        extract($row);
        ?>

        <option value=" <?php echo $pid; ?> "><?php echo $pname; ?></option>

<?php
    } ?>
    </select> </td>

    <td><label>Quantity</label>
    <input type="text" name="tquantity[]" value=""></td>

    <td><label>Price</label>
    <input type="text" name="saleprice[]" value=""></td>

    <td><button name="remove"...