Multiples Footer CallBack in Datatables

I have the need to put 3 data in footer of datatables. I am using DataBase CallBack Footer. The idea is to put the subtotal, tips and total (sum of subtotal and tip). In the attached image you can see how it is

my html code:

<tfoot>
  <tr>
    <th colspan="5" style="text-align:right">Sub Total:</th>
    <th></th>
  </tr>
  <tr>
    <th colspan="5" style="text-align:right">Propina(10%):</th>
    <th></th>
  </tr>
  <tr>
    <th colspan="5" style="text-align:right">Total:</th>
    <th></th>
  </tr>
</tfoot>

js code:

"footerCallback": function ( row, data, start, end, display ) {
            var api = this.api(), data;

            // Remove the formatting to get integer data for summation
            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };

            // Total over all pages
            total = api
                .column( 4 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );

            // Total over this page
            pageTotal = api
                .column( 5, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );

            // Update footer
            $( api.column( 5 ).footer() ).html(

                ('$'+number_format(pageTotal))
        }

As always, thanks to everyone who can help or guide me in how to do this. Greetings.