```html
<div class="container">
  <div class="status">
    <div id="stepOne" class="statusItem stepActive">My Company Info</div>
    <div id="stepTwo" class="statusItem">Select Vendor</div>
    <div id="stepThree" class="statusItem">Document Info</div>
    <div id="stepFour" class="statusItem">Notes</div>
    <div id="stepFive" class="statusItem">Coding</div>
    <div id="stepSix" class="statusItem">Line Items</div>
  </div>

  <div class="row">
    <div class="col-lg-6 mx-auto mt-4">
      <div class="card shadow">
        <div class="card-header bg-primary">
          <h3 class="text-light">Add Requisition</h3>
        </div>

        <br /><br />
        <div class="card-body p-4">
          <form
            action="/documentAdd"
            method="post"
            class="needs-validation"
            id="add-form"
            novalidate
          >
            <!-- ----------------------------------------Section myCompanyInfo Start---------------------------------------- -->
            <section id="myCompanyInfo" class="active">
              <!-- subscriberName Start -->
              <div class="mb-3">
                <label for="subscriberName"
                  >My Company Name <span style="color: red">*</span></label
                >
                <input
                  type="text"
                  name="subscriberName"
                  class="form-control form-control-lg"
                  value="Smith & Allen Consulting, Inc."
                  required
                  readonly
                />
              </div>
              <!-- subscriberName End -->

              <!-- subscriberContact Start -->
              <div class="mb-3">
                <label for="Template"
                  >My Company Contact <span style="color: red">*</span></label
                >
                <input
                  type="text"
                  name="subscriberContact"
                  class="form-control form-control-lg"
                  value="Belinda Allen, CFO"
                  required
                  readonly
                />
              </div>
              <!-- subscriberContact End -->

              <!-- subscriberAddressLine1 Start -->
              <div class="mb-3">
                <label for="subscriberAddressLine1"
                  >Address Line 1 <span style="color: red">*</span></label
                >
                <input
                  type="text"
                  name="subscriberAddressLine1"
                  class="form-control form-control-lg"
                  value="303 Regatta Way"
                  required
                  readonly
                />
              </div>
              <!-- subscriberAddressLine1 End -->

              <!-- subscriberAddressLine2 Start -->
              <div class="mb-3">
                <label for="subscriberAddressLine2"
                  >Address Line 2 <span style="color: red">*</span></label
                >
                <input
                  type="text"
                  name="subscriberAddressLine2"
                  class="form-control form-control-lg"
                  value="Suite 100"
                  required
                  readonly
                />
              </div>
              <!-- subscriberAddressLine2 End -->

              <!-- subscriberCity Start -->
              <div class="mb-3">
                <label for="subscriberCity"
                  >My Company City <span style="color: red">*</span></label
                >
                <input
                  type="text"
                  name="subscriberCity"
                  class="form-control form-control-lg"
                  value="Summerville"
                  required
                  readonly
                />
              </div>
              <!-- subscriberCity End -->

              <!-- subscriberState Start -->
              <div class="mb-3">
                <label for="subscriberState"
                  >My Company State <span style="color: red">*</span></label
                >
                <input
                  type="text"
                  name="subscriberState"
                  class="form-control form-control-lg"
                  value="SC"
                  required
                  readonly
                />
              </div>
              <!-- subscriberState End -->

              <!-- subscriberZip Start -->
              <div class="mb-3">
                <label for="subscriberZip"
                  >My Company Zip <span style="color: red">*</span></label
                >
                <input
                  type="text"
                  name="subscriberZip"
                  class="form-control form-control-lg"
                  value="29486"
                  required
                  readonly
                />
              </div>
              <!-- subscriberZip End -->

              <button
                id="goToSectionSelectVendorBtn"
                name="goToSectionSelectVendorBtn"
                class="btn btn-primary btn-lg"
                onclick="goToSectionSelectVendor(event)"
              >
                Next - Select Vendor
              </button>
            </section>

            <!-- ----------------------------------------Section selectVendor Start---------------------------------------- -->
            <section id="selectVendor" class="inactive">
              <!-- Vendor Start -->
              <!-- This needs to be replacw with a Dynamic Select Element -->
              <div class="mb-3">
                <label for="vendorNameSearchBox">Vendor Search:</label>
                <input
                  id="vendorNameSearchBox"
                  class="form-control form-control-lg"
                  onkeyup="typeAhead()"
                  type="text"
                  placeholder="Vendor Name Search"
                />
            
              </section>
            <!-- ----------------------------------------Section selectVendor Start---------------------------------------- -->

            <section id="myTable"></section>
















            <!-- ----------------------------------------Section showVendorFields Start---------------------------------------- -->
            
            <section id="vendorAddress" class="active">
              <!-- Add Vendor Fields Here Start -->
              <!-- vendorName Start -->
              <div class="mb-3">
                <label for="vendorName"
                  >Vendor Name <span style="color: red">*</span></label
                >
                <input
                  type="text"
                  name="vendorName"
                  id="vendorName"
                  class="form-control form-control-lg"
                  placeholder="Enter Vendor Name"
                  required
                />
              </div>
              <!-- vendorName End -->

              <!-- vendorContact Start -->
              <div class="mb-3">
                <label for="vendorContact"
                  >Vendor Contact <span style="color: red">*</span></label
                >
                <input
                  type="text"
                  name="vendorContact"
                  id="vendorContact"
                  class="form-control form-control-lg"
                  placeholder="Enter Vendor Contact"
                  required
                />
              </div>
              <!-- vendorContact End -->

              <!-- vendorAddressLine1 Start -->
              <div class="mb-3">
                <label for="vendorAddressLine1"
                  >Vendor Address Line 1
                  <span style="color: red">*</span></label
                >
                <input
                  type="text"
                  name="vendorAddressLine1"
                  id="vendorAddressLine1"
                  class="form-control form-control-lg"
                  placeholder="Enter Vendor Address Line 1"
                  required
                />
              </div>
              <!-- vendorAddressLine1 End -->

              <!-- vendorAddressLine2 Start -->
              <div class="mb-3">
                <label for="vendorAddressLine2">Vendor Address Line 2</label>
                <input
                  type="text"
                  name="vendorAddressLine2"
                  class="form-control form-control-lg"
                  placeholder="Enter Vendor Address Line 2"
                />
              </div>
              <!-- vendorAddressLine2 End -->

              <!-- vendorCity Start -->
              <div class="mb-3">
                <label for="vendorCity"
                  >Vendor City <span style="color: red">*</span></label
                >
                <input
                  type="text"
                  name="vendorCity"
                  id="vendorCity"
                  class="form-control form-control-lg"
                  placeholder="Enter Vendor City"
                  required
                />
              </div>
              <!-- vendorCity End -->

              <!-- vendorState Start -->
              <div class="mb-3">
                <label for="vendorState"
                  >Vendor State <span style="color: red">*</span></label
                >
                <input
                  type="text"
                  name="vendorState"
                  id="vendorState"
                  class="form-control form-control-lg"
                  placeholder="Enter Vendor State"
                  required
                />
              </div>
              <!-- vendorState End -->

              <!-- vendorZip Start -->
              <div class="mb-3">
                <label for="vendorZip"
                  >Vendor Zip <span style="color: red">*</span></label
                >
                <input
                  type="text"
                  name="vendorZip"
                  id="vendorZip"
                  class="form-control form-control-lg"
                  placeholder="Enter Vendor Zip"
                  required
                />
              </div>
              <!-- vendorZip End -->

              <!-- vendorPhone Start -->
              <div class="mb-3">
                <label for="vendorPhone"
                  >Vendor Phone <span style="color: red">*</span></label
                >
                <input
                  type="tel"
                  name="vendorPhone"
                  id="vendorPhone"
                  class="form-control form-control-lg"
                  placeholder="Enter Vendor Phone"
                  required
                />
              </div>
              <!-- vendorPhone End -->

              <!-- vendorEmail Start -->
              <div class="mb-3">
                <label for="vendorEmail">Vendor Email</label>
                <input
                  type="email"
                  name="vendorEmail"
                  class="form-control form-control-lg"
                  placeholder="Enter Vendor Email"
                />
              </div>
              <!-- vendorEmail End -->

              <!-- vendorWebsite Start -->
              <div class="mb-3">
                <label for="vendorWebsite">Vendor Website</label>
                <input
                  type="url"
                  name="vendorWebsite"
                  class="form-control form-control-lg"
                  placeholder="Enter Vendor Website"
                />
              </div>
              <!-- vendorWebsite End -->

              <!-- vendorFax Start -->
              <div class="mb-3">
                <label for="vendorFax">Vendor Fax</label>
                <input
                  type="tel"
                  name="vendorFax"
                  class="form-control form-control-lg"
                  placeholder="Enter Vendor Fax"
                />
              </div>
              <!-- vendorFax End -->
              <!-- Add Vendor Fields Here End-- -->

              <button
                id="goToDocumentInfoBtn"
                name="goToDocumentInfoBtn"
                class="btn btn-primary btn-lg"
                onclick="goToSectionDocumentInfo(event)"
                disabled
              >
                Next - Document Info
              </button>
            </section>
            <!-- ----------------------------------------Section showVendorFields End------------------------------------------ -->


            <!-- ----------------------------------------Section documentInfo Start---------------------------------------- -->
            <section id="documentInfo" class="inactive">
              <!-- Shipping Method - Start -->
              <!-- This needs to be replacw with a Dynamic Select Element -->
              <div class="mb-3">
                <label for="shippingMethod"
                  >Shipping Method <span style="color: red">*</span></label
                >
                <select
                  class="form-select"
                  name="shippingMethod"
                  id="shippingMethod"
                  onchange="validateDocumentInfo()"
                >
                  <option value="">----- Select Shipping Method -----</option>
                  <% shipping.forEach(element => { %>
                  <option value="<%= element.shippingMethod %>">
                    <%= element.shippingMethod %> <% }); %>
                  </option>
                </select>
              </div>
              <!-- Shipping Method - End -->

              <!-- paymentTerms - Start -->
              <div class="mb-3">
                <!-- This needs to be replacw with a Dynamic Select Element -->
                <label for="paymentTerms"
                  >Payment Terms <span style="color: red">*</span></label
                >
                <select
                  class="form-select was-validated"
                  name="paymentTerms"
                  id="paymentTerms"
                  onchange="validateDocumentInfo()"
                >
                  <option value="">----- Select Payment Terms -----</option>
                  <% terms.forEach(element => { %>
                  <option value="<%= element.paymentTermDescription %>">
                    <%= element.paymentTermDescription %> <% }); %>
                  </option>
                </select>
              </div>
              <!-- paymentTerms - End -->

              <!-- buyer Start-->
              <div class="mb-3">
                <label for="buyer"
                  >Buyer <span style="color: red">*</span></label
                >
                <input
                  type="text"
                  name="buyer"
                  id="buyer"
                  class="form-control form-control-lg"
                  placeholder="Enter Buyer Name"
                  onchange="validateDocumentInfo()"
                  required
                />
              </div>
              <!-- buyer End-->

              <!-- requestedDate Start -->
              <div class="mb-3">
                <label for="requestedDate"
                  >Requested Date <span style="color: red">*</span></label
                >
                <input
                  type="date"
                  name="requestedDate"
                  id="requestedDate"
                  class="form-control form-control-lg"
                  onchange="validateDocumentInfo()"
                />
              </div>
              <!-- requestedDate End -->

              <button
                name="goToDocumentNotesBtn"
                id="goToDocumentNotesBtn"
                class="btn btn-primary btn-lg"
                onclick="goToSectionDocumentNotes(event)"
                disabled
              >
                Next - Document Notes
              </button>
            </section>

            <!-- ----------------------------------------Section Notes Start---------------------------------------- -->
            <section id="documentNotes" class="inactive">
              <!-- Note - Start -->
              <div class="mb-3">
                <label for="note"
                  >Internal Note:
                  <small class="text-muted"
                    >Vendor will not see these comments.</small
                  ></label
                >
                <textarea
                  name="note"
                  id="note"
                  class="form-control form-control-lg"
                  cols="30"
                  rows="10"
                >
Enter Private Document Note...</textarea
                >
              </div>
              <!-- Note - End -->

              <!-- documentComments Start -->
              <div class="mb-3">
                <label for="documentComments"
                  >Document Comments:
                  <small class="text-muted"
                    >Vendor will see these comments.</small
                  ></label
                >
                <textarea
                  name="documentComments"
                  id="documentComments"
                  class="form-control form-control-lg"
                  cols="30"
                  rows="10"
                >
Enter Public Document Note...</textarea
                >
              </div>
              <!-- documentComments End -->
              <button
                name="goToCodingBtn"
                class="btn btn-primary btn-lg"
                onclick="goToSectionCoding(event)"
              >
                Next - Document Coding
              </button>
            </section>
            <!-- ----------------------------------------Section Notes End------------------------------------------ -->

            <!-- ----------------------------------------Section Hidden Start---------------------------------------- -->
            <section id="hidden" class="inactive">
              <!-- documentType Start -->
              <div class="mb-3">
                <label for="documentType"
                  >documentType <span style="color: red">*</span></label
                >
                <input
                  type="text"
                  name="documentType"
                  class="form-control form-control-lg"
                  required
                  value="Requisition"
                  disabled
                />
              </div>
              <!-- documentType End -->

              <!-- documentStatus Start -->
              <div class="mb-3">
                <label for="documentStatus"
                  >documentStatus <span style="color: red">*</span></label
                >
                <input
                  type="text"
                  name="documentStatus"
                  class="form-control form-control-lg"
                  required
                  value="UnApproved"
                  disabled
                />
              </div>
              <!-- documentStatus End -->

              <!-- revisionNumber Start -->
              <div class="mb-3">
                <label for="revisionNumber"
                  >revisionNumber <span style="color: red">*</span></label
                >
                <input
                  type="text"
                  name="revisionNumber"
                  class="form-control form-control-lg"
                  value="1"
                  required
                  disabled
                />
              </div>
              <!-- revisionNumber End -->

              <!-- createdBy Start -->
              <div class="mb-3">
                <label for="createdBy"
                  >Created By<span style="color: red">*</span></label
                >
                <input
                  type="text"
                  name="createdBy"
                  class="form-control form-control-lg"
                  required
                  value="Richard Allen"
                  readonly
                />
              </div>
              <!-- createdBy End -->

              <!-- approvedBy Start -->
              <div class="mb-3">
                <label for="approvedBy">Approved By</label>
                <input
                  type="text"
                  name="approvedBy"
                  class="form-control form-control-lg"
                  disabled
                />
              </div>
              <!-- approvedBy End -->
            </section>

            <!-- ----------------------------------------Section Coding Start---------------------------------------- -->
            <section id="coding" class="inactive">
              <!-- contractNumber Start -->
              <div class="mb-3">
                <label for="contractNumber">Contract Number</label>
                <input
                  type="text"
                  name="contractNumber"
                  class="form-control form-control-lg"
                />
              </div>
              <!-- contractNumber End -->

              <!-- glNaturalAccount Start -->
              <div class="mb-3">
                <label for="glNaturalAccount">GL Natural Account</label>
                <input
                  type="text"
                  name="glNaturalAccount"
                  class="form-control form-control-lg"
                />
              </div>
              <!-- glNaturalAccount End -->

              <!-- glDepartmentAccount Start -->
              <div class="mb-3">
                <label for="glDepartmentAccount">GL Department Account</label>
                <input
                  type="text"
                  name="glDepartmentAccount"
                  class="form-control form-control-lg"
                />
              </div>
              <!-- glDepartmentAccount End -->

              <!-- projectId Start -->
              <div class="mb-3">
                <label for="projectId">Project Id</label>
                <input
                  type="text"
                  name="projectId"
                  class="form-control form-control-lg"
                />
              </div>
              <!-- projectId End -->

              <!-- projectPhase Start -->
              <div class="mb-3">
                <label for="projectPhase">Project Phase</label>
                <input
                  type="text"
                  name="projectPhase"
                  class="form-control form-control-lg"
                />
              </div>
              <!-- projectPhase End -->

              <!-- projectStep Start -->
              <div class="mb-3">
                <label for="projectStep">Project Step</label>
                <input
                  type="text"
                  name="projectStep"
                  class="form-control form-control-lg"
                />
              </div>
              <!-- projectStep End -->

              <!-- projectDetail Start -->
              <div class="mb-3">
                <label for="projectDetail">Project Detail</label>
                <input
                  type="text"
                  name="projectDetail"
                  class="form-control form-control-lg"
                />
              </div>
              <!-- projectDetail End -->

              <!-- After Submit, I need to redirect to Add Line Items and pass the result.id -->
              <!-- Submit Start -->
              <div class="mb-3 d-grid">
                <input
                  type="submit"
                  name="goToLineItemsBtn"
                  value="Next - Add Line Items"
                  class="btn btn-primary btn-lg"
                />
              </div>
              <!-- Submit End -->
            </section>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<br /><br />
<div class="container" id="lblIds"></div>

<script>
  // Select Vendor and Shipping Method
  function goToSectionSelectVendor(event) {
    event.preventDefault();
    document.getElementById("myCompanyInfo").classList.remove("active");
    document.getElementById("myCompanyInfo").classList.add("inactive");
    document.getElementById("selectVendor").classList.remove("inactive");
    document.getElementById("selectVendor").classList.add("active");
    document.getElementById("stepOne").classList.remove("stepActive");
    document.getElementById("stepTwo").classList.add("stepActive");
  }

  // Payment Terms, Buyer, Requested Date
  function goToSectionDocumentInfo(event) {
    event.preventDefault();
    document.getElementById("selectVendor").classList.remove("active");
    document.getElementById("selectVendor").classList.add("inactive");
    document.getElementById("documentInfo").classList.remove("inactive");
    document.getElementById("documentInfo").classList.add("active");
    document.getElementById("stepTwo").classList.remove("stepActive");
    document.getElementById("stepThree").classList.add("stepActive");
  }
  function goToSectionDocumentNotes(event) {
    event.preventDefault();
    document.getElementById("documentInfo").classList.remove("active");
    document.getElementById("documentInfo").classList.add("inactive");
    document.getElementById("documentNotes").classList.remove("inactive");
    document.getElementById("documentNotes").classList.add("active");
    document.getElementById("stepThree").classList.remove("stepActive");
    document.getElementById("stepFour").classList.add("stepActive");
  }

  function goToSectionCoding(event) {
    event.preventDefault();
    document.getElementById("documentNotes").classList.remove("active");
    document.getElementById("documentNotes").classList.add("inactive");
    document.getElementById("coding").classList.remove("inactive");
    document.getElementById("coding").classList.add("active");
    document.getElementById("stepFour").classList.remove("stepActive");
    document.getElementById("stepFive").classList.add("stepActive");
  }

  function goToSectionLineItems(event) {
    event.preventDefault();
    document.getElementById("coding").classList.remove("active");
    document.getElementById("coding").classList.add("inactive");
    document.getElementById("lineItems").classList.remove("inactive");
    document.getElementById("lineItems").classList.add("active");
  }

  function validateVendor() {
    document.getElementById("goToDocumentInfoBtn").disabled = false;
  }

  function validateDocumentInfo() {
    // Need to validate four fields
    let sm = document.getElementById("shippingMethod").value;
    let pt = document.getElementById("paymentTerms").value;
    let b = document.getElementById("buyer").value;
    let rd = document.getElementById("requestedDate").value;
    console.log(`${sm} - ${pt} - ${b} - ${rd}`);
    if (sm) {
      document.getElementById("shippingMethod").classList.add("is-valid");
    }
    if (pt) {
      document.getElementById("paymentTerms").classList.add("is-valid");
    }
    if (b) {
      document.getElementById("buyer").classList.add("is-valid");
    }
    if (rd) {
      document.getElementById("requestedDate").classList.add("is-valid");
    }
    if (sm && pt && b && rd) {
      document.getElementById("goToDocumentNotesBtn").disabled = false;
    }
  }

  function validateDocumentNotes() {
    document.getElementById("goToCodingBtn").disabled = false;
  }
  function validateCoding() {
    document.getElementById("goToLineItemsBtn").disabled = false;
  }
</script>

<script>
  function displayElementIds() {
    let str = "";
    let elem = document.getElementById("add-form").elements;
    console.log(elem);
    // Filter to Submit Buttons
    for (let i = 0; i < elem.length; i++) {
      if (elem[i].type === "submit") {
        str += "<b>Type: </b>" + elem[i].type + " ----|---- ";
        str += "<b>Name: </b>" + elem[i].name + " ----|---- ";
        str += "<b>Value: </b>" + elem[i].value + " ----|---- ";
        str += "<b>innerHtml: </b>" + elem[i].innerHTML;
        str += "<br><br>";
      } else {
      }
    }
    document.getElementById("lblIds").innerHTML = str;
  }

  // displayElementIds();
</script>

<script>
function vendorSearch() {console.log(`Hello from vendorSearch()`)}
</script>





<script>
const vendorName = document.getElementById("vendorNameSearchBox");

// This is the function that gets called by the event listener onkeyup
// in the search box with id="vendorNameSearch"
function typeAhead() {
  console.log(`typeAhead has been called.`);
  let v = vendorName.value;
  if (v.length > 3) {
    console.log(`typAhead() has been called.`);
    getTypeAheadData(v);
  }
}



  // This function calls the route and passes the search term as a parameter.
  function getTypeAheadData(x) {
    let myTerm = x;
    console.log(`The value of myTerm: ${myTerm}`);
    // Pass myTerm as a parameter to Route: 
    let xyz = location.href = "/findVendorY" + "?term=" + myTerm;
    console.table(`xyz: ${xyz}`);
    const myTable = document.getElementById('myTable');
    // If the xyz contains documents, then build the table.
    if (xyz) {

    } else {
      console.log(`No Matching Vendors.`);
    }
  }
</script>
```