Two Forms sending data to an API on Node

Question

I am developing an application with Node and Mongoose. My problem is this: In the back end I have the model of an entity called Equipment. Schema has several parameters.

I have a form to create an Equipment (this form works normally). The creation form has several inputs that have the same name as the Mongo Schema parameters.

The problem is that I am now creating a form to edit Equipment according to the id. I happen to use one of the inputs to popular another by consulting another API. I believe that there is a conflict because the name of the inputs are equal, however, as I will leave them with another name to do the update?

The first input, after clicking on the magnifying glass, sends a get to an API and populates the second:

In the creation form this works, already in the other, is not populated.

Creation modal:

<fieldset>
        <!-- Select Basic -->
        <div class="form-group">
          <label class="col-md-4 control-label" for="sha1Curve"
            >Curva</label
          >
          <div class="col-md-6 input-container">
            <input
              id="sha1Curve"
              name="sha1Curve"
              type="text"
              placeholder="SHA-1"
              class="form-control input-sm"
            />
          </div>
          <a href="javascript:void(0)" name="searchCurve" id="searchCurve"
            ><i class="fa fa-search fa-lg" style="vertical-align: -50%;"></i
          ></a>
        </div>

        <!-- Select Basic -->
        <div
          id="grainDiv"
          name="grainDiv"
          class="form-group"
          style="display: none;"
        >
          <label class="col-md-4 control-label" for="grain">Grão</label>
          <div class="col-md-6">
            <select id="grain" name="grain" class="form-control"> </select>
          </div>
        </div>

Edition modal:

<fieldset>
          <!-- Select Basic -->
          <div class="form-group">
            <label class="col-md-4 control-label" for="sha1Curve"
              >Curva</label
            >
            <div class="col-md-6 input-container">
              <input
                id="sha1Curve"
                name="sha1Curve"
                type="text"
                placeholder="SHA-1"
                class="form-control input-sm"
              />
            </div>
            <a href="javascript:void(0)" name="searchCurve" id="searchCurve"
              ><i class="fa fa-search fa-lg" style="vertical-align: -50%;"></i
            ></a>
          </div>

          <!-- Select Basic -->
          <div
            id="grainDiv"
            name="grainDiv"
            class="form-group"
            style="display: block;"
          >
            <label class="col-md-4 control-label" for="grain">Grão</label>
            <div class="col-md-6">
              <select id="grain" name="grain" class="form-control"> </select>
            </div>
          </div>

xml

Way I’m Performing the Post:

$("#searchCurve").on("click", function() {
var xhr = new XMLHttpRequest();
var url = "URL";

xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 0) {
    alert(
      "Não foi possível buscar as informações, tente novamente mais tarde."
    );
  }
};

xhr.onload = function() {
  var status = xhr.status;
  var data = xhr.responseText.split("<nome>");
  var grain;
  // Add equipment
  var grainSelect = document.getElementById("grain");

  for (var i = 1; i < data.length; i += 2) {
    grain = data[i].split(",;");
    console.log(grain[0]);

    var option = document.createElement("option");
    option.text = grain[0];

    grainSelect.add(option, null);
    showAddForm();
  }
};

var sha1 = document.getElementById("sha1Curve").value;
console.log(sha1);
var postData = JSON.stringify({ idCurva: sha1.trim() });
console.log(postData);
xhr.send(postData);

});

Thank you