Show modal by clicking on a button in a table

I am trying to do a modal that is filled with a query in MYSQL when clicking on a button that is generated by each record that exists in a table, but only works in a single button (sometimes it is random or only works in the second record).

That's how the table would look in HTML:

<table id='ejemplo1' class='table table-bordered table-striped'>
    <thead>
        <tr>
            <th>Hora de entrega</th>
            <th>Cliente</th>
            <th>Dirección de obra</th>
            <th>Fecha de entrega</th>
            <th>Acciones</th>
        </tr>
    </thead>
    <tbody>
        <tr id='head'>
            <td>".$reg['hora']."</td>
            <td>".$reg['cliente']."</td>
            <td>".$reg['dir_obra']."<br/>".$reg['indicaciones']."</td>
            <td>".$reg['fecha_entrega']."</td>
            <td>        
                <button class='btn btn-danger btn-sm' aria-label='Left Align' onclick='location.href=\"borrar_direccion.php?id=".$folio."\";'> Borrar</button>
                <button class='btn btn-success btn-sm' aria-label='Left Align' onclick='location.href=\"editar_direccion.php?id=".$folio."\";'> Editar</button></br>
                <button id='btnModal'>Abrir modal</button>
            </td>
        </tr>
    </tbody>
</table>

And this would be the JS of the modal:

    var modal = document.getElementById('Modal');

    var btn = document.getElementById("btnModal");

    var span = document.getElementsByClassName("cerrar")[0];

    btn.onclick = function() {
        modal.style.display = "block";
    }

    span.onclick = function() {
        modal.style.display = "none";
    }

    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }

Thank you in advance for the answers.