jQuery Append Clone Table

Question

I want to make simple POS like this:

1. How to make clone element using jQuery append (and make new div/id)

This is mine:

 <div class="row"><a class="offset-s6 waves-effect waves-dark btn blue"><i class="mdi-content-add"></i></i></a> <table class="table table-hover"> <thead> <tr> <th>Produk</th> <th>Jumlah</th> <th>Harga</th> <th>Stok</th> <th>Total</th> <th>Delete</th> </tr> </thead> <tbody> <tr> <th> <select style="width: 100%" class="select2 js-example-responsive"> <optgroup label="Baut Macam"> <option value="baut-1">Baut Mur</option> <option value="baut-2">Mur Baut</option> <option value="baut-3">Tang</option> <option value="baut-4">Tong</option> <option value="baut-5">Teng</option> </optgroup> <optgroup label="Alat Berat"> <option value="ab1">Palu</option> <option value="ab2">Linggis</option> <option value="ab3">Linggis</option> <option value="ab4">skrup</option> </optgroup> </select> </th> <td> <div class="input-field"> <input type="number" name="quantity" min="1" max="5"> </div> </td> <td>?</td> <td>?</td> <td>?</td> <td><a class="waves-effect waves-blue btn-flat"><i class="mdi-action-delete"></i></a> </td> </tr> </tbody> </table> </div> 

2. How to make realtime calculate price

Thank you :)

Answer 1

1 - To clone and append element use:

$('tbody').find('tr').clone().appendTo($('tbody'));

2 - To calculate price

$('input').on('input', functoin(e) {
    // your code to calculate and put result where you need it.
});

I assume this code won't work right away. Just tried to give you a clue.

Adjust for your case.