<tbody id='bodyDetail'>
                        <script language="javascript">
                            function tambahHobi() {
                                    var idf = document.getElementById("idf").value;
                                    var stre;
                                    <?php
                                    $koneksi = mysqli_connect("localhost","root","","posijb");
                                    $ambildata = mysqli_query($koneksi, "SELECT * FROM customer");  //ambil data dari tabel kategori
                                    while($a=mysqli_fetch_array($ambildata)){ ?>

                                    stre="<input id='srow" + idf + "' type='text' size='40' class='form-control' name='deskripsi[]' /><p></p>";
                                    stre1="<input id='srow" + idf + "' type='text' size='10' class='form-control' name='qty[]' /><p></p>";
                                    stre2="<select id='srow" + idf + "' class='form-control' name='satuan[]' autofocus required> <option value=''> - Pilih - </option> <option value='Kg'> Kg </option> <option value='Pcs'> Pcs </option> <option value='Rim'> Rim </option> <option value='Lembar'> Lembar </option> <option value='Buku'> Buku </option> </select><p></p>";
                                    stre3="<input id='srow" + idf + "' type='text' size='7' class='form-control' name='harga[]' /><p></p>";
                                    stre4="<input id='srow" + idf + "' type='text' class='form-control' name='bayar[]' /><p></p>";
                                    stre5="<select id='srow" + idf + "' class='form-control' name='pembayaran[]' autofocus required> <option value=''> - Pilih - </option> <option value='Cash'> Cash </option> <option value='Tempo 1 Mggu'> Tempo 1 Mggu </option> <option value='Tempo 2 Mggu'> Tempo 2 Mggu </option> <option value='Tempo 3 Mggu'> Tempo 3 Mggu </option> <option value='Tempo 1 Bln'> Tempo 1 Bln </option> </select><p></p>";
                                    stre6="<input id='srow" + idf + "' type='text' class='form-control' name='supplier_id[]' placeholder='Supplier' /><p></p>";
                                    stre7="<input id='srow" + idf + "' type='text' size='30' class='form-control' name='rekening[]' placeholder='Rekening' /><p></p>";
                                    stre8="<button class='btn btn-danger' id='srow" + idf + "' onclick='hapusElemen(\"#srow" + idf + "\"); return false;'>X</button></p>";

                                    <?php } ?>

                                    txt="<tr>";
                                    txt=txt+"<td>"+stre+"</td>";
                                    txt=txt+"<td>"+stre1+"</td>";
                                    txt=txt+"<td>"+stre2+"</td>";
                                    txt=txt+"<td>"+stre3+"</td>";
                                    txt=txt+"<td>"+stre4+"</td>";
                                    txt=txt+"<td>"+stre5+"</td>";
                                    txt=txt+"<td>"+stre6+"</td>";
                                    txt=txt+"<td>"+stre7+"</td>";
                                    txt=txt+"<td>"+stre8+"</td>";

                                    txt=txt+"</tr>";
                                    $("#bodyDetail").append(txt);
                                /*
                                    $("#divHobi").append(stre);
                                    $("#divHobi1").append(stre1);
                                    $("#divHobi2").append(stre2);
                                    $("#divHobi3").append(stre3);
                                    $("#divHobi4").append(stre4);
                                    $("#divHobi5").append(stre5);
                                    $("#divHobi6").append(stre6);
                                    $("#divHobi7").append(stre7);
                                    $("#divHobi8").append(stre8);
                                */

                                    idf = (idf-1) + 2;

                                document.getElementById("idf").value = idf;
                            }
                            function hapusElemen(idf) {
                                    $(idf).remove();
                                    $(idf).remove();
                                    $(idf).remove();
                                    $(idf).remove();
                                    $(idf).remove();
                                    $(idf).remove();
                                    $(idf).remove();
                                    $(idf).remove();
                                    $(idf).remove();
                                }
                        </script>
                            <!-- <tr>
                                <td id="divHobi"></td>
                                <td id="divHobi1"></td>
                                <td id="divHobi2"></td>
                                <td id="divHobi3"></td>
                                <td id="divHobi4"></td>
                                <td id="divHobi5"></td>
                                <td id="divHobi6"></td>
                                <td id="divHobi7"></td>
                                <td id="divHobi8"></td>
                            </tr> -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
        <button type="button" onclick="tambahHobi(); return false;" class="btn btn-primary">+ Rincian </button>
        <button type="submit" class="btn btn-success pull-right" >Simpan</button>
    </form>