Datatable button aiming to different Modal with javascript

Question

It is a table display in webpage, it displays one button for row using Datatable. In the column #4 displays either of 2 values, one is --- which is desires for trigger any of the two Modals after click over it own row's button.

When click over any row's button, console.log successfully display message set, however it does not open any modal and display error document.getElementById(...).modal is not a function at HTMLButtonElement.<anonymous>

Table header is ['eamil', 'first-name', 'last-name', 'NIT', 'button'] data value for table is:

[['prueba1@gmail.com','Daniel','Apellido01','907595-0'],
['prueba4@gmail.com','Prueba04','Apellido04','---']]

HTML

<!-- DataTable -->
<table id="listados" class="display nowrap responsive" style="width:100%">
    <thead>
        <tr>
            {% for i in header %}
            <th>{{ i }}</th>
            {% endfor %}
        </tr>
    </thead>
    <tbody>
        {% for i in evnts %}
        <tr>
            <td class="text-dark">{{ i[0] }}</td>
            <td class="text-dark">{{ i[1] }}</td>
            <td class="text-dark">{{ i[2] }}</td>
            {% if i[3] != '---' %}
            <td class="text-dark">{{ i[3] }}</td>
            {% else %}
            <td class="text-dark">{{ i[3] }}</td>
            {% endif %}
            <td></td>
        </tr>
        {% endfor %}
    </tbody>
    <tfoot>
        <tr>
            {% for i in header %}
            <th>{{ i }}</th>
            {% endfor %}
        </tr>
    </tfoot>
</table>

<!-- Modals -->

<div class="modal fade" id="newNit" tabindex="-1" role="dialog" aria-labelledby="newNitModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="newNitModalLabel">Agregar Nuevo NIT</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="nuevo"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-success" id="borrar">Continuar</button>
            </div>
        </div>
    </div>
</div>       
<div class="modal fade" id="actualizarNit" tabindex="-1" role="dialog" aria-labelledby="actualizarNitModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="actualizarNitModalLabel">Actualizar informacion NIT</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="update"> </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-success" id="borrar">Continuar</button>
            </div>
        </div>
    </div>
</div>

snippet for Datatable and modals

$(document).ready( function () {
    var pasarValor;
    var table = $('#listados').DataTable({
        "columnDefs": [ {
                "targets": -1,
                "data": null,
                "defaultContent": "<button class='btn-success' data-toggle='modal' id='agregarNit'>NIT</button>"
                }
            ],
        "scrollX":true,
    })
    $('#listados #agregarNit').on('click', function() {
        var data = table.row( $(this).parents('tr') ).data();
            pasarValor = {
                mail: data[0],
                nit: data[3]
                };
        
        if (data[3] === '---'){
            console.log('True')
            document.getElementById('newNit').modal('show');
        } else {
            console.log('False')
            document.getElementById('actualizarNit').modal('show');
        }
    });
});