Jquery input .val() returns undefined when one button triggers another button-CodePudding

I have multiple buttons that need to be activated at the same time. When each button is click from the input it returns what is type. The problem is I need all the buttons to be fire off at the same time. When I have a separate button fire off theses buttons though I get undefined and not the input.

$(document).on("click", "#devSaveBtn", function () {
  if (
    $("#primaryBtn").trigger("click") &&
    $("#secondaryBtn").trigger("click") &&
    $("#thirdBtn").trigger("click")
  ) {
    var getInput = $(this)
      .closest("td")
      .find("input[name='Object Name']")
      .val();
    console.log("Input = "   getInput);

    var getInput2 = $(this)
      .closest("td")
      .find("input[name='Project Name']")
      .val();
    console.log("Input2 = "   getInput2);

    var getInput3 = $(this)
      .closest("td")
      .find("input[name='Description']")
      .val();
    console.log("Input3 = "   getInput3);
  } else {
    console.log("This is not working");
  }
});

<button type="button" input type="submit" id="devSaveBtn"  title="Reset Changes" style="visibility: visible; background-color: #f4d8b4;"><i ></i>
  Save</button>
<td  id="recordObjName">
  <p>
    <input type="text" id="OBJ_NAME" name="Object Name" placeholder="" required minlength="8">
    <button id="primaryBtn">Primary</button>
  </p>
  <button style="display: none;">Submit</button>
</td>
<td  id="recordProjectName">
  <input type="text" id="DEPLOYER_PROJECT" name="Project Name" placeholder="">
  <button id="secondaryBtn">Secondary</button>
</td>

<td  id="recordDeployerCandidate" placeholder="">
  <input type="text" id="DESCRIPTION" name="Description" placeholder="" style="resize: vertical; width: 40em; height: 85px;">
  <button id="thirdBtn">Third</button>
</td>

CodePudding user response：

$(document).on("click", "#devSaveBtn", function () {
  var getInput = $("input");
  for (var i = 0; i < getInput.length; i  )
    console.log(getInput[i].id, " => Input", i, " = ", getInput[i].value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.js" integrity="sha512-CX7sDOp7UTAq i1FYIlf9Uo27x4os kGeoT7rgwvY 4dmjqV0IuE/Bl5hVsjnQPQiTOhAX1O2r2j5bjsFBvv/A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<button type="button" input type="submit" id="devSaveBtn"  title="Reset Changes" style="visibility: visible; background-color: #f4d8b4;"><i ></i>
  Save</button>
<td  id="recordObjName">
  <p>
    <input type="text" id="OBJ_NAME" name="Object Name" placeholder="" required minlength="8">
  </p>
</td>
<td  id="recordProjectName">
  <input type="text" id="DEPLOYER_PROJECT" name="Project Name" placeholder="">
</td>
<td  id="recordDeployerCandidate" placeholder="">
  <input type="text" id="DESCRIPTION" name="Description" placeholder="" style="resize: vertical; width: 40em; height: 85px;">
</td>