Как исправить поле ввода, не обновляя Firebase с несколькими изменениями

Question

У меня есть расширенная модель, которая показывает детали в поле ввода, и пользователь может изменить или добавить детали в это поле, когда они нажимают кнопку редактирования, а когда они заканчивают, нажимают кнопку сохранения, и она обновляется в Firebase?

Проблема здесь в том, что обновляется только одно поле за раз, и пользователь должен будет снова щелкнуть по редактированию, войти в поле и сохранить его снова.

Есть ли какое-либо решение для этого?

опубликовал минимальный воспроизводимый код:

HTML:

<div class="modal">
  <div class="modal-content">
    <div class="shipDetails">
      <!-- Contact Chip -->
      <span class="mdl-chip mdl-chip--contact">
        <span class="mdl-chip__contact mdl-color--teal mdl-color-text--white">R</span>
        <span class="mdl-chip__text" id="retriveRR" ></span>
      </span>
      <span class="mdl-chip mdl-chip--contact">
        <span class="mdl-chip__contact mdl-color--teal mdl-color-text--white">D</span>
        <span class="mdl-chip__text" id="retriveDate" ></span>
      </span>
      <div>
        <span class="mdl-chip__text">CNEE:</span>
        <input name="retriveCNEE" type="RRField" id="retriveCNEE" disabled>
        <span class="mdl-chip__text">Account:</span>
        <input name="retriveCustAccount" type="RRField" id="retriveCustAccount" disabled>
      </div>
      <div class="model-width">
        <span class="mdl-chip__text">Origin:</span>
        <input name="retriveOrg" type="RRField" id="retriveOrg" style="width: 80px;" disabled>
        <span class="mdl-chip__text">Destination:</span>
        <input name="retriveDest" type="RRField" id="retriveDest" style="width: 80px;" disabled>
        <span class="mdl-chip__text">Weight:</span>
        <input name="retriveWeight" type="RRField" id="retriveWeight" style="width: 80px;" disabled>
        <span class="mdl-chip__text">Pieces:</span>
        <input name="retrivePC" type="RRField" id="retrivePC" style="width: 80px;" disabled>
      </div>
      <button id="saveEditBtn" onclick="" style="margin-top:10px;width: 32%;">Edit</button>
      <button id="ViewFilesBtn" onclick="" style="margin-top:10px;width: 32%;">View</button>
    </div>
  </div>
</div>

Javascript:

var RRText = document.getElementById("retriveRR");

//get fields data
$('#saveEditBtn').click(function() {
  if (document.getElementById('saveEditBtn').innerHTML == "Edit") {

    document.getElementById("retriveCNEE").disabled = false;
    document.getElementById("retriveCustAccount").disabled = false;
    document.getElementById("retriveOrg").disabled = false;
    document.getElementById("retriveDest").disabled = false;
    document.getElementById("retriveWeight").disabled = false;
    document.getElementById("retrivePC").disabled = false;
    document.getElementById('saveEditBtn').innerHTML = "Save"

  } else if (document.getElementById('saveEditBtn').innerHTML == "Save") {

    var RRValue = RRText.innerText;
    var FirebaseRef = firebase.database().ref("Requests").child(RRValue);
    var CNEEText = document.getElementById("retriveCNEE");
    var CUSTACCText = document.getElementById("retriveCustAccount");
    var OrgText = document.getElementById("retriveOrg");
    var DestText = document.getElementById("retriveDest");
    var WeightText = document.getElementById("retriveWeight");
    var PCText = document.getElementById("retrivePC");

    document.getElementById("retriveCNEE").disabled = true;
    document.getElementById("retriveCustAccount").disabled = true;
    document.getElementById("retriveOrg").disabled = true;
    document.getElementById("retriveDest").disabled = true;
    document.getElementById("retriveWeight").disabled = true;
    document.getElementById("retrivePC").disabled = true;

    FirebaseRef.child("Customer Account").set(CUSTACCText.value);
    FirebaseRef.child("Customer Name").set(CNEEText.value);
    FirebaseRef.child("Origin").set(OrgText.value);
    FirebaseRef.child("Destination").set(DestText.value);
    FirebaseRef.child("Weight").set(WeightText.value);
    FirebaseRef.child("Pieces").set(PCText.value);

    document.getElementById('saveEditBtn').innerHTML = "Edit"

  }
});

Answer 1

Я решил проблему, изменив способ обновления Firebase на FirebaseRef.update({

var FirebaseRef = firebase.database().ref("Requests").child(RRValue);     
FirebaseRef.update({
     "Customer Account":CUSTACCText.value,
    "Customer Name":CNEEText.value,
    "Shipper Name":ShipperText.value,
    "Collection Address":CollectAddrText.value,
    "Origin":OrgText.value,
    "Destination":DestText.value,
    "Weight":WeightText.value,
    "Pieces":PCText.value,
    "Dimensions":DIMText.value,
    "Stack":StackText.value,
    "Desk":DeskText.value,
    "Comment":CommentText.value,
    "Pricing Comments":PricingCommentsText.value,
    "SelectedAgentsRates/0/Rates":Agent0Text.value,
    "SelectedAgentsRates/1/Rates":Agent1Text.value,
    "SelectedAgentsRates/2/Rates":Agent2Text.value,
    "Selling":SellingRateText.value,
    "Status":StatusText.value,
     "Cancel Reason":ClosedReasonText.value,
     "Confirmed Agent":ConfirmedAgentText.value,
     "Cost":ConfirmedAgentRateText.value
    });