title: Problems updating bootstrap 4 model
body: <p>I'm developing an app in Spring Boot with JSP in frontend. I have the following problem:</p>
  <p>I have a table with different rows. I can click a button to update every row if I want. When I click in one row and change some data all works fine. The problem is when I click in one row, close or save this modal and following I open another row and edit again. The modal is good but when I save, I receive 2 POST to update the row behind and the actually row.</p>
  <p>I don't use nothing strange... Probably I need to &quot;clean&quot; the modal when I close or save?</p>
  <p>One of my modals (this happends in all table with modal to update the row)</p>
  <p>Html/JSP:</p>
  <pre><code>&lt;!-- UPDATE DISP MODAL --&gt;
  &lt;div id=&quot;updateDispModal&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;myModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
      &lt;div class=&quot;modal-dialog modal-lg&quot;&gt;
          &lt;div class=&quot;modal-content&quot;&gt;
              &lt;form id=&quot;updateDispForm&quot; class=&quot;needs-validation&quot;&gt;
                  &lt;div class=&quot;modal-header&quot;&gt;
                      &lt;div class=&quot;modal-title&quot;&gt;
                          &lt;h5 id=&quot;modalTitle&quot;&gt;
                              &lt;spring:message code=&quot;shares.displacement.update.btn&quot; /&gt;
                          &lt;/h5&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;modal-body&quot;&gt;        
                      &lt;div class=&quot;row&quot;&gt;
                          &lt;div class=&quot;col-sm-12 col-md-6&quot;&gt;
                              &lt;div class=&quot;form-group&quot;&gt;
                                  &lt;label for=&quot;activityCenter&quot; class=&quot;col-form-label&quot;&gt;&lt;spring:message code=&quot;shares.displacement.table.activity.center&quot; /&gt;&lt;/label&gt;
                                  &lt;select id=&quot;activityCenter&quot; name=&quot;activityCenter&quot; class=&quot;form-control&quot; required&gt;
                                      &lt;option disabled selected=&quot;selected&quot;&gt;
                                          &lt;spring:message code=&quot;shares.displacement.table.activity.center&quot; /&gt;
                                      &lt;/option&gt;
                                      &lt;c:forEach items=&quot;${teamLeaders}&quot; var=&quot;teamLeader&quot;&gt;
                                          &lt;option value=&quot;${teamLeader.userId}&quot;&gt;
                                              &lt;spring:message code=&quot;${teamLeader.name} ${teamLeader.surnames}&quot; /&gt;
                                          &lt;/option&gt;
                                      &lt;/c:forEach&gt;
                                  &lt;/select&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;col-sm-12 col-md-6&quot;&gt;
                              &lt;div class=&quot;form-group&quot;&gt;
                                  &lt;label for=&quot;displacementDate&quot; class=&quot;col-form-label&quot;&gt;&lt;spring:message code=&quot;shares.displacement.table.total.time&quot; /&gt;&lt;/label&gt;
                                  &lt;input id=&quot;displacementDate&quot; name=&quot;displacementDate&quot; type=&quot;datetime-local&quot; class=&quot;form-control&quot; required&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      
                      &lt;div class=&quot;row&quot;&gt;
                          &lt;div class=&quot;col-sm-12 col-md-6&quot;&gt;
                              &lt;label for=&quot;manualHours&quot; class=&quot;col-form-label&quot;&gt;&lt;spring:message code=&quot;shares.displacement.total.time&quot; /&gt;&lt;/label&gt;
                              &lt;input type=&quot;time&quot; class=&quot;form-control&quot; id=&quot;manualHours&quot; name=&quot;manualHours&quot;&gt;
                          &lt;/div&gt;
                          
                          &lt;div class=&quot;col-sm-12 col-md-6&quot;&gt;
                              &lt;label for=&quot;roundTrip&quot; class=&quot;col-form-label&quot;&gt;&lt;spring:message code=&quot;shares.displacement.round.trip&quot; /&gt;&lt;/label&gt;
                              &lt;input type=&quot;checkbox&quot; class=&quot;form-control&quot; id=&quot;roundTrip&quot; name=&quot;roundTrip&quot; style=&quot;width: 20px&quot;&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      
                      &lt;div class=&quot;row&quot;&gt;
                          &lt;div class=&quot;col&quot;&gt;
                              &lt;div class=&quot;form-group&quot;&gt;
                                  &lt;label for=&quot;observations&quot; class=&quot;col-form-label&quot;&gt;&lt;spring:message code=&quot;shares.displacement.observations&quot; /&gt;&lt;/label&gt;
                                  &lt;textarea id=&quot;observations&quot; name=&quot;observations&quot; class=&quot;form-control&quot; rows=&quot;6&quot;&gt;&lt;/textarea&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      
                      &lt;input type=&quot;hidden&quot; class=&quot;form-control&quot; id=&quot;projectId&quot; name=&quot;projectId&quot;&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;modal-footer clearfix&quot;&gt;
                      &lt;div class=&quot;w-100&quot;&gt;
                          &lt;div class=&quot;float-left&quot;&gt;
                              &lt;button type=&quot;button&quot; class=&quot;btn btn-sm&quot; data-dismiss=&quot;modal&quot;&gt;&lt;spring:message code=&quot;cerrar&quot; /&gt;&lt;/button&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;float-right&quot;&gt;
                              &lt;button id=&quot;updateDispBtn&quot; type=&quot;button&quot; class=&quot;btn btn-sm btn-success&quot;&gt;&lt;spring:message code=&quot;save&quot; /&gt;&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- /CREATE MODAL --&gt;
  </code></pre>
  <p>JavaScript:</p>
  <pre><code>$('#updateDispBtn').click(function () {
              
              $.ajax({
                  type: &quot;PUT&quot;,
                  url: &quot;/shares/displacement/&quot; + id,
                  data: $('#updateDispForm').serialize(),
                  success: function(msg) {
                      $('#dTableSignings').DataTable().ajax.reload();
                      showNotify(msg, 'success');
                  },
                  error: function(e) {
                      showNotify(e.responseText, 'danger');
                  }
              });
  
              $('#updateDispModal').modal('hide');
          });
  </code></pre>