Bug multiples modals bootstrap

I have two modals on the same page, one to change and another to remove information from the bank.

The code for the first modal is this:

    <!-- Modal Editar -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Alterar Informações Instituição de Insino</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-primary">Salvar alterações</button>
      </div>
    </div>
  </div>
</div>

The code that fills in the modal is this:

    <script>
  $(".btn[data-target='#myModal']").click(function () {
    var columnHeadings = $("thead th").map(function () {
      return $(this).text();
    }).get();
    columnHeadings.pop();
    var columnValues = $(this).parent().siblings().map(function () {
      return $(this).text();
    }).get();
    var modalBody = $('<div id="modalContent"></div>');
    var modalForm = $('<form role="form" name="modalForm" action="/ies/atualizar" method="post"></form>');
    $.each(columnHeadings, function (i, columnHeader) {
      var formGroup = $('<div class="form-group"></div>');
      formGroup.append('<label for="' + columnHeader + '">' + columnHeader + '</label>');
      formGroup.append('<input class="form-control" name="' + columnHeader + i + '" id="' + columnHeader + i + '" value="' + columnValues[i] + '" />');
      modalForm.append(formGroup);
    });
    modalBody.append(modalForm);
    $('.modal-body').html(modalBody);
  });
  $('.modal-footer .btn-primary').click(function () {
    $('form[name="modalForm"]').submit();
  });
</script>

The codes of the second modal are as follows:

<!-- Modal Deletar -->
<div class="modal fade" id="modalDeletar">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Deseja Apagar Instituição de Insino?</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-primary">Remover</button>
      </div>
    </div>
  </div>
</div>

    <script>
  $(".btn[data-target='#modalDeletar']").click(function () {
    var columnHeadings = $("thead th").map(function () {
      return $(this).text();
    }).get();
    columnHeadings.pop();
    var columnValues = $(this).parent().siblings().map(function () {
      return $(this).text();
    }).get();
    var modalBody = $('<div id="modalContentDelete"></div>');
    var modalForm = $('<form role="form" name="modalFormDelete" action="/ies/deletar" method="post"></form>');
    $.each(columnHeadings, function (i, columnHeader) {
      var formGroup = $('<div class="form-group"></div>');
      formGroup.append('<label for="' + columnHeader + '">' + columnHeader + '</label>');
      formGroup.append('<input class="form-control" name="' + columnHeader + i + '" id="' + columnHeader + i + '" value="' + columnValues[i] + '" />');
      modalForm.append(formGroup);
    });
    modalBody.append(modalForm);
    $('.modal-body').html(modalBody);
  });
  $('.modal-footer .btn-primary').click(function () {
    $('form[name="modalForm"]').submit();
  });
</script>

What happens is the following, when I have only the modal to edit in the code, I can usually edit the values in the database, when I add the delete modal, it can no longer update, but delete works normally .

What might be causing this error?