jquery не отображает элемент при выполнении .show ()

Question

Я пытаюсь показать веб-форму по щелчку строки таблицы с целью обновления строки. Я смог заставить мое модальное окно отображаться с помощью .show () по нажатию другой ссылки (рисунок 1).

/ * это просто ссылка на тег с классом js-open-modal * /

    $(".js-open-modal").click(function(){
         $(".modal").show();
    });     
    
    /* populate form with row attributes & show modal */
    
    $('tr').on('click', function() {
    
        var rowId = $(this).data('row');
        var rowText = $('tr[data-row=' + rowId + ']').text();
        var textArr = rowText.trim().split('\n');
    
        var formElement = "";
        $(textArr).each(function(i) {
          textArr[i] = $.trim(textArr[i]);
          console.log(i + ': ' + textArr[i]);
    
          formElement += '<input type="text" value="' + textArr[i] + '">\n';
        });
    
        var modal = $('.modal');
        modal.append(formElement);
        modal.show();
    });
   

.modal {
      display: none;
      position:fixed;
      top: 50%;
      left: 50%;
      transform:translate(-50%,-50%);
      background: #fff;
      width: 320px;
      height: 320px;
      text-align: center;
      box-sizing:border-box;
      box-shadow:0 0 20px rgba(0,0,0,.2);
    
      &.visible {
        display: block;
      }
    }
    
    .modal__header {
      color:white;
      background: #333;
      line-height: 50px;
      text-align: center;
      position: relative;
      height:50px;
      box-sizing:border-box;
    
      a {
        position: absolute;
        top: 0;
        right: 0;
        text-decoration: none;
        color:white;
        font-weight: bold;
        display: block;
        padding: 0 20px;
        font-size:16px;
        background: #555;
        height: 100%;
      }
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal">
  <div class="modal__header">
    modal header
    <a href="#" class="js-close-modal">X</a>
  </div>
  <p>
    <form method="post" action="">
      <input type="submit" >
    </form>
  </p>
</div>
<a class="js-open-modal">
   Open Popup
</a>

Теперь я пытаюсь добавить html к форме, которую я смог успешно выполнить, поскольку она будет отображаться в модальном окне после того, как я щелкну строку и продолжу нажимать созданную мной тестовую ссылку. Прямо сейчас, щелкая строку, вы добавляете правильный html, но не показывает модальный режим, как я этого хочу. Тем не менее, если я щелкаю по моей ссылке модального теста после щелчка по строке, я вижу заполненную веб-форму, которая мне нужна, проблема в том, что я хочу, чтобы все это происходило в один клик. Извините, я не смог отобразить html в разделе кода. это div, где класс является модальным, и он содержит элемент формы.