title: How to update input using Modal confirm multiple times
body: <p>I need to confirm several fields separately after a request. User need to decide between new or old value. Modal is updating input overriding the text and does not wait for confirmation. It only shows at the last event then the confirmation answer is set to all the other ones. I did not find much help on my research and I don't know how to fix it.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var modalConfirm = function(callback) {
    $("#gti-modal-btn-yes").click(function() {
      callback(true);
      $("#gti-modal").hide();
    });
    
    $("#gti-modal-btn-no").click(function() {
      callback(false);
      $("#gti-modal").hide();
    });
    
    $("#gti-modal-btn-close").click(function() {
      callback(false);
      $("#gti-modal").hide();
    });
  }
  
  function modalAsk(msg, oldVal, newVal) {
    $('.modal').appendTo($('body'));
    $("#gti-modal-msg")[0].innerHTML = "&lt;h3&gt;" + msg + "&lt;/h3&gt;";
    $("#gti-modal").show();
    
    modalConfirm(function(confirm) {
      if (confirm) {
        oldVal = newVal
        alert('Change')
  
      } else {
        alert('No Change')
      }
    });
  }
  
  function funConfirmFields(fieldName, oldVal, newVal) {
    if (newVal !== "") {
      if (newVal !== oldVal) {
        if (modalAsk('Warning!&lt;/br&gt;Field: " ' + fieldName.toUpperCase() + '"&lt;/br&gt;Old value: ' + oldVal + '&lt;/br&gt;New values: ' + newVal + '&lt;/br&gt;&lt;/br&gt;Change to New Value?')) {
          newVal = oldVal
        }
      }
    } else {
      newVal = oldVal;
    }
    return newVal
  }
  
  $(document).ready(function() {
    $("#txtName")[0].value = funConfirmFields('Name', $("#txtName")[0].value, "b",);
    $("#txtDoc")[0].value = funConfirmFields('Doc', $("#txtDoc")[0].value,  "2222");
    $("#txtCell")[0].value = funConfirmFields('Cell', $("#txtCell")[0].value, "456");
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  &lt;div id="gti-modal" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="gti-modal-Label" aria-hidden="false" style="display: none;"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button id="gti-modal-btn-close" type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
          &lt;p id="gti-modal-titulo" class="modal-title"&gt;&lt;i class='fa fa-question-circle pull-rigth '&gt;&lt;/i&gt; MyModal &lt;/p&gt;
        &lt;/div&gt;
        &lt;div id="gti-modal-msg" class="modal-body"&gt;&lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button id="gti-modal-btn-yes" type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true"&gt;yes&lt;/button&gt;
          &lt;button id="gti-modal-btn-no" type="button" class="btn btn-primary"&gt;No&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;input class="form-control" type="text" id="txtName" name="txtName" value="a"/&gt;
   &lt;input class="form-control" type="text" id="txtDoc" name="txtDoc" value= "111"/&gt;
   &lt;input class="form-control" type="text" id="txtCell" name="txtCell" value= "123"/&gt;</code></pre>
  </div>
  </div>
  </p>