How to update Input using Modal Confirm Multiple Times

Question

I need to confirm some fields separately. It happens that it overwrites the text, does not wait for confirmation and only appears at the end of the last call and the confirmation of this, replicates to the previous ones. I don’t know what I can do to fix this.

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) {
  
  $("#gti-modal-msg")[0].innerHTML = "<h3>" + msg + "</h3>";
  $("#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('Atenção!</br>Campo: " ' + fieldName.toUpperCase() + '"</br>Valor atual: ' + oldVal + '</br>Novo Valor: ' + newVal + '</br></br>atualizar para o novo valor?')) {
        newVal = oldVal
      }
    }
  } else {
    newVal = oldVal;
  }
  return newVal
}

$(document).ready(function() {  
  $("#txtNome")[0].value = funConfirmFields('Nome',  $("#txtNome")[0].value, "b");
  $("#txtDoc")[0].value = funConfirmFields('Doc', $("#txtDoc")[0].value, "2222");
  $("#txtCel")[0].value = funConfirmFields('Cel', $("#txtCel")[0].value, "456");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="gti-modal" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="gti-modal-Label" aria-hidden="false" style="display: none;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button id="gti-modal-btn-close" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <p id="gti-modal-titulo" class="modal-title"><i class='fa fa-question-circle pull-rigth '></i> MyModal </p>
      </div>
      <div id="gti-modal-msg" class="modal-body"></div>
      <div class="modal-footer">
        <button id="gti-modal-btn-yes" type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true">yes</button>
        <button id="gti-modal-btn-no" type="button" class="btn btn-primary">No</button>
      </div>
    </div>
  </div>
</div>
<input class="form-control" type="text" id="txtNome" name="txtNome" value="a"/>
<input class="form-control" type="text" id="txtDoc" name="txtDoc" value= "111"/>
<input class="form-control" type="text" id="txtCel" name="txtCel" value= "123"/>

Answer 1

I realized that bootstrap-modaldoes not behave confirm Window then I could use jquery confirm etc.. but I preferred to create modal dynamically like this reply

This was the result:

function addModal( id,  msg, callback) {            
  html =  '<div id="gti-modal-'+id+'" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="gti-modal-Label" aria-hidden="false" style="display: none;">';
  html += '<div class="modal-dialog">';
  html += '<div class="modal-content">';
  html += '<div class="modal-header">';
  html += '<button id="gti-modal-btn-close" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>';
  html += '<h3 id="gti-modal-title" class="modal-title"><i class="fa fa-exclamation-triangle pull-rigth"></i> GTI</h3>';  
  html += '</div>';
  html += '<div class="modal-body">';
  html += '<h4>'+msg+'</h4>'
  html += '</div>';
  html += '<div class="modal-footer">';
  html += '<button id="gti-modal-btn-yes-'+id+'" type="button" class="btn btn-default">Yes</button>';
  html += '<button id="gti-modal-btn-no-'+id+'"type="button" class="btn btn-primary">No</button>';
  html += '</div>';  // content
  html += '</div>';  // dialog
  html += '</div>';  // footer
  html += '</div>';  // modalWindow
  $('body').append(html);
      
  $("#gti-modal-"+id).show();    
  $("#gti-modal-"+id).on('hidden.bs.modal', function (e) {
    $(this).remove();
  });
  $("#gti-modal-btn-yes-"+id).click(function () {
    callback(true);
    $("#gti-modal-"+id).hide();
  });
  $("#gti-modal-btn-no-"+id).click(function () {
    callback(false);
    $("#gti-modal-"+id).hide();
  });
  $("#gti-modal-btn-close-").click(function () {
    callback(false);
    $("#gti-modal-"+id).hide();
   });
}
function askModal(id, msg, inputFiel, newValue) {
  addModal(id, msg, function (confirm) {		
  inputFiel.val(confirm ? newValue : inputFiel.val());		
  });
}
function funConfirmField(id, inputFiel, newValue) {	
  if (newValue !== "" && (newValue  !== inputFiel.val())) {
    askModal(id, 'Atenção!</br>Field: '+id.toUpperCase() + '</br>New Value: ' +  newValue + '</br>Old Value: ' + inputFiel.val() + '</br></br>Change to New Value?', inputFiel, newValue);
  }
}
$(document).ready(function () {
  funConfirmField('Nome', $('#nome'), 'João');
  funConfirmField('Document', $('#doc'), '222');
  funConfirmField('Celular', $('#cel'), '456');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<input class="form-control" type="text" id="nome" name="mome" value="Maria"/>
<input class="form-control" type="text" id="doc" name="doc" value= "111"/>
<input class="form-control" type="text" id="cel" name="cel" value= "123"/>