通过jQuery方法传递到模态主体的数据只能使用一次

Question

我正在创建一个显示MySQL数据的HTML，并具有编辑特定数据并将其保存到MySQL的模式。 我已经可以通过jQuery方法将几个数据传递到模态主体中。它可以正常工作。 但是我注意到每个人只能使用一次。为什么？

$(document).ready(function() {
  // Get value on button click and show on modal
  $(".showModalBtn").on("click", function(e) {
    var var1 = $(this).data('var1');
    var var2 = $(this).data('var2');
    $("#modal_var1").html(var1);
    $("#modal_var2").html(var2);
    $("#myModal").show()
  });
  
  $("#closeModalBtn").on("click", function() {
    $("#myModal").hide()
  });
});

body {
  font-family: Arial, Helvetica, sans-serif;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 15px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(80, 80, 80);
  background-color: rgba(0, 80, 80, 0.4);
}

.modal-content {
  background-color: #f9f980;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 40%;
}

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div id="myModal" class="modal">
  <div class="modal-content">
    <p>Text inside modal!!!</p>
    <p>This is a text inside the modal with Var1 = <span id="modal_var1"> </span>.</p>
    <h3 id="modal_var2"></h3>
    <p>This is a text inside the modal with Var2 = <span id="modal_var2">.</p>
    <button type="button" id="closeModalBtn">Close Modal</button>
  </div>
</div>
<button type="button" class="showModalBtn" data-var1="BOTAO DE FORA" data-var2="222">Abre Modal (Fora do FORM)</button>
<p>&nbsp;</p>
<table width="400" border="1" cellpadding="0" cellspacing="0">
  <form action="modal.html" method="post" enctype="multipart/form-data">
    <tr>
      <td colspan="3" align="center" valign="middle" style="font-family:'Courier New'"><strong><font color="#0000A0">Buttons inside FORM</font></strong></td>
    </tr>
    <tr>
      <td valign="top">&nbsp;</td>
      <td align="center" valign="middle">
        <input type="submit" value="Process FORM (Input type submit)">
        <button type="button" class="showModalBtn" data-var1="BOTAO DO FORMULARIO" data-var2="111">Abre Modal (do form)</button>
      </td>
      <td valign="top">&nbsp;</td>
    </tr>
  </form>
</table>

val1的值未显示在＆lt; p＆gt;这是模态内的文本，其中var1 =＆lt; span ID =“ modal_var1”＆gt; ＆lt;/span＆gt;。＆lt;/p＆gt;。 为什么？ 感谢您的努力。 最好的