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

Question

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" class="devbutton devinithidden readonlyhidden" title="Reset Changes" style="visibility: visible; background-color: #f4d8b4;"><i class="fa fa-save"></i>
  Save</button>
<td class="noncomponentswidth" 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 class="noncomponentswidth" id="recordProjectName">
  <input type="text" id="DEPLOYER_PROJECT" name="Project Name" placeholder="">
  <button id="secondaryBtn">Secondary</button>
</td>

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

Answer 1

$(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" class="devbutton devinithidden readonlyhidden" title="Reset Changes" style="visibility: visible; background-color: #f4d8b4;"><i class="fa fa-save"></i>
  Save</button>
<td class="noncomponentswidth" id="recordObjName">
  <p>
    <input type="text" id="OBJ_NAME" name="Object Name" placeholder="" required minlength="8">
  </p>
</td>
<td class="noncomponentswidth" id="recordProjectName">
  <input type="text" id="DEPLOYER_PROJECT" name="Project Name" placeholder="">
</td>
<td class="noncomponentswidth" id="recordDeployerCandidate" placeholder="">
  <input type="text" id="DESCRIPTION" name="Description" placeholder="" style="resize: vertical; width: 40em; height: 85px;">
</td>