borge.php

$('table.maintable').append('<tbody class="vdetails"><tr>\
                    <td>\
                        <input type="checkbox" class="vouchers form-control" name="checkbox" data-ref_id="'+ref+'">\
                    </td>\
                    <td></td>\
                    <td class="for_details">\
                        <input type="hidden" name="ref[]" class="ref" value="'+ref+'">\
                        <a class="thname" data-toggle="collapse" data-target="#'+ref+'" href="" onclick="return false;">\
                        <label style="text-align:center;">PO-'+pad(ref,8)+'</label>\
                        </a>\
                    </td>\
                    <td>\
                        <input type="hidden" name="description[]" class="description" value="'+description+'">\
                        <label>'+description+'</label>\
                    </td>\
                    <td>\
                        <input type="hidden" name="acct[]" class="acct" value="'+titleid+'">\
                        <label>'+titletext+'</label>\
                    </td>\
                    <td>\
                        <input type="hidden" name="amount_debit[]" class="amount_debit debit_'+ref+'" value="0.00">\
                        <label style="text-align:right;" class="debit_'+ref+'">0.00</label>\
                    </td>\
                    <td>\
                        <input type="hidden" name="amount_credit[]" class="amount_credit" value="'+credit+'">\
                        <label style="text-align:right;">'+(!credit ? '' : parseFloat(credit).toLocaleString(undefined, {minimumFractionDigits: 2,maximumFractionDigits: 2}))+'</label>\
                    </td>\
                    <td>\
                    </td>\
                </tr></tbody>\
                <tbody class="details '+ref+'">\
                    <tr>\
                        <td></td>\
                        <td></td>\
                        <td>\
                            <div class=" control-label collapse" id="'+ref+'" style="width:1000px;">\
                                <div class="panel panel-primary sub_details">\
                                    <div class="panel-heading" style="height:20px;">\
                                        <table class="header" width="100%">\
                                            <thead>\
                                                <tr>\
                                                    <th width="2%"></th>\
                                                    <th width="40%">Item Description</th>\
                                                    <th width="18%">Tax Type</th>\
                                                    <th width="20%">Paid</th>\
                                                    <th width="20%">To Pay</th>\
                                                </tr>\
                                            </thead>\
                                        </table>\
                                    </div>\
                                    <div style="padding:10px;padding-top:2px;padding-bottom:2px;" class="mainbody panel-body">\
                                        <table  width="100%" class="secondtable table table-striped table-hover">\
                                            <tbody class="po_dtl'+ref+' lasttbody">\
                                            </tbody>\
                                        </table>\
                                    </div>\
                                </div>\
                            </div>\
                        </td>\
                    </tr>\
                    </tbody>');
            $.getJSON('/dev/api/getPODetailsAccounting?id=' +ref, function(data){
                $.each(data, function(index, details){
                    $('table.secondtable tbody.po_dtl'+ref+'').append('<tr>\
                            <td width="2%">\
                                <input type="checkbox" class=" form-control last_checkbox" name="checkbox" value="'+ref+'">\
                            </td>\
                            <td width="40%" style="text-align:left;">\
                               <input type="hidden" name="" class="" value="'+details.itemdesc+'">\
                                <label>'+details.itemdesc+'</label>\
                            </td>\
                            <td width="18%" style="text-align:left;">\
                                <input type="hidden" name="" class="last_tax" value="'+details.tax_rate+'">\
                                <input type="hidden" name="" class="" value="'+details.taxtype_name+'">\
                                <label>'+details.taxtype_name+'</label>\
                            </td>\
                            <td width="20%" style="text-align:left;">\
                                <input type="hidden" name="" class="" value="'+details.amount_paid+'">\
                                <label>'+details.amount_paid+'</label>\
                            </td>\
                            <td width="20%" style="text-align:left;">\
                                <input type="text" name="" class="form-control topay" data-topay="'+ref+'" style="text-align:right;" value="'+parseFloat(details.netunitprice - details.amount_paid).toFixed(2)+'">\
                            </td>\
                        </tr>');
                })
            })