Two tables shows 10+10 entries

cortex1909

Link to test: http://etpetrol.000webhostapp.com/pregled.html
Debugger gives me Error 404

Hello. I have problem with Datatables that I can not resolve.
I've been using it for a while and It's pretty good, but now I've come up with idea to have two tables, one showing bills that are paid, other one showing bills that are cancelled.
When I load both tables, It's working okay until there is 10+ entries, then It's loading 10 rows from table one and 10 rows from table two, making it in combine 20 entries whilst I want only to show.

Code JS:

function PopuniTablicuRacuni() {
    var table;
    aRacuni.forEach(function (oRacuni) {
        var VrstaGor = "";
        if (oRacuni.VrstaGoriva == 1) {
            VrstaGor = "Diesel";
        } else if (oRacuni.VrstaGoriva == 2) {
            VrstaGor = "Benzin";
        }
        if (oRacuni.Storno == 1) {
            $("#table_body_storno").append("<tr><td>" + oRacuni.Kolicina + "</td><td>" + VrstaGor + "</td><td>" + oRacuni.DatumVrijeme + "</td><td>" + oRacuni.Zaposlenik + "</td><td>" + oRacuni.Cijena + "</td></tr>");
        } else {
            $("#table_body").append("<tr><td>" + oRacuni.Kolicina + "</td><td>" + VrstaGor + "</td><td>" + oRacuni.DatumVrijeme + "</td><td>" + oRacuni.Zaposlenik + "</td><td>" + oRacuni.Cijena + "</td></tr>");
        }
        $(document).ready(function () {
            table = $('#TablicaRacuni').DataTable();
        });
    });
    $(document).ready(function () {
        $('#TablicaRacuni tbody#table_body').on('click', 'tr', function () {
            data = table.row(this).data();
            $('#Storno').modal("show");
        });

        $('#TablicaRacuni tbody#table_body_storno').on('click', 'tr', function () {
            alert("Ovaj račun je već storniran.")
        });
    });

}

Code HTML:

            <table id="TablicaRacuni" class="display" style="width:100%">
                <thead>
                    <tr>
                        <th>Količina / L</th>
                        <th>Vrsta goriva</th>
                        <th>Datum/vrijeme</th>
                        <th>Zaposlenik</th>
                        <th>Cijena / HRK</th>
                    </tr>
                </thead>
                <tbody id="table_body"> </tbody>
                <tbody id="table_body_storno"> </tbody>
            </table>

cortex1909

I thought that I've made it, but then 'click' is not working properly.

colin

Your table has two tbody elements, which isn't supported.

Colin