Modal with Javascript

I have a table which is added <td> if necessary by the user to fill in a kind of invoice, the <td> is displayed and has the button but does not point to the modal that shows to fill said information

 <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {

            $("#add").click(function () {
                // Obtenemos el numero de columnas (td) que tiene la primera fila (tr)
                var tds = $("#tabla tr:last td").length;
                var trs = $("#tabla tr").length;
                var nuevaFila = "<tr>";

                for (var i = 0; i < tds; i++) {
                    nuevaFila += "<td> </td>";
                }

                nuevaFila += "</tr>";


                 let miHermosoNuevoBoton = '<button >Click Me!</button>';

                let miHermosaNuevaFila = $.parseHTML(nuevaFila);
                $(miHermosaNuevaFila).find("td:last-child").append(miHermosoNuevoBoton);
                $("#tabla").append(miHermosaNuevaFila);

            });


            $("#del").click(function () {

                var trs = $("#tabla tr").length;
                if (trs > 1) {

                    $("#tabla tr:last").remove();
                }
            });
        });
    </script>

<div class="modal fade" id="registro">
    <div class="modal-dialog">
        <div class="modal-content">