How to display Item Wise Tax in invoice?

Frappe Framework Customization
5

I somehow displayed item wise tax. I believe there must be some better approach. I don’t find any. But this is not rendered while printing invoice :frowning: Can somebody guide me in the right direction ?

Here is my code:

<table class="table table-bordered">
    <tbody>
        <tr>
            <th>Sr</th>
            <th>Item Name</th>
            <th>Description</th>
            <th class="text-right">Qty</th>
            <th class="text-right">Rate</th>
            <th class="text-right">Amount</th>
            <th class="text-right">CGST</th>
            <th class="text-right">SGST</th>
            <th class="text-right">IGST</th>
        </tr>
        {%- for row in doc.items -%}
        <tr>
            <td style="width: 3%;">{{ row.idx }}</td>
            <td style="width: 20%;">
                {{ row.item_name }}
            </td>
            <td style="width: 20%;">
                <div style="border: 0px;">{{ row.description }}</div>
            </td>
            <td style="width: 10%; text-align: right;">{{ row.qty }} {{ row.uom or row.stock_uom }}</td>
            <td style="width: 15%; text-align: right;">{{ row.get_formatted("rate", doc) }}</td>
            <td style="width: 10%; text-align: right;">{{ row.get_formatted("amount", doc) }}</td>
            <td class="sgst{{loop.index}}">Nil</td>
            <td class="cgst{{loop.index}}">Nil</td>
            <td class="igst{{loop.index}}">Nil</td>
        </tr>
        {%- endfor -%}
    </tbody>
</table>
 <script type="text/javascript">
    var $table = $(".tax-break-up");  // as far as i saw tax-break-up is not assigned to any form field.
    var sgst_name = "SGST - N" // change according to ur tax type name
	var cgst_name = "CGST - N" // change according to ur tax type name
	var igst_name = "IGST - N" // change according to ur tax type name
    var header = [];
    var rows = [];
    $table.find("thead th").each(function() {
        header.push($(this).html());
    });
    $table.find("tbody tr").each(function() {
        var row = {};
        $(this).find("td").each(function(i) {
            var key = header[i],
                value = $(this).html();
            row[key] = value;
        });
        rows.push(row);
    });
    $.each(rows, function(key, value) {
        if (value.hasOwnProperty(sgst_name)) {
            $(".sgst".concat(key + 1)).html('<span>' + value[sgst_name] + '</span>');
        }
        if (value.hasOwnProperty(cgst_name)) {
            $(".cgst".concat(key + 1)).html('<span>' + value[cgst_name] + '</span>');
        }
        if (value.hasOwnProperty(igst_name)) {
            $(".igst".concat(key + 1)).html('<span>' + value[igst_name] + '</span>');
        }
    });
</script>

You may either create custom print format or else in the existing standard drag and drop form replace item table with custom html and copy, paste above code and reload.