JS and jQuery Address Book - search function not working (amongst other problems)

Question

I'm very new to the development world (2 months) and I'm trying to get into a selective coding bootcamp. They've asked me to build an addressbook in JS, using HTML, CSS and jQuery, as part of the admissions process. I think I'm pretty close but I can't get my solution to do exactly what it needs.

So this is what I've got so far in JS/jQuery:

// creating an address book constructor, which will contain all our contacts
function AddressBook() {
  this.contacts = [];
}

// creating function that adds contacts to the array
AddressBook.prototype.addContact = function (contactToAdd) {
  this.contacts[this.contacts.length] = contactToAdd;
};

// creating a contact search function
AddressBook.prototype.searchContact = function (searchTerm) {
for (let i = 0; i < this.contacts.length; i++) {
    if (
      searchTerm === this.contacts[i].firstName ||
      this.contacts[i].lastName ||
      this.contacts[i].phoneNumber ||
      this.contacts[i].address
    ) {
      return this.contacts[i];
    }
    return false;
  }
};

//creating a delete function
AddressBook.prototype.deleteContact = function (contactToDelete) {
  for (let i = 0; i < this.contacts.length; i++) {
    if (contactToDelete === this.contacts[i]) {
      delete this.contacts[i];
    }
  }
};

// creating contacts as objects with certain properties and values
function Contact(firstName, lastName, phoneNumber, address) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.phoneNumber = phoneNumber;
  this.address = address;
}

function displayContacts(addressBookDisplay) {
  let htmlForTable = "";
  for (let i = 0; i < addressBookDisplay.contacts.length; i++) {
    const contact = addressBookDisplay.contacts[i];
    htmlForTable +=
      "<tr>" +
      "<td>" +
      contact.firstName +
      "</td>" +
      "<td>" +
      contact.lastName +
      "</td>" +
      "<td>" +
      contact.phoneNumber +
      "</td>" +
      "<td>" +
      contact.address +
      "</td>" +
      "</tr>";
  }
  $("#contact-table-start").html(htmlForTable).appendTo("table");
}

function showContact(contact) {
  if (contact !== undefined) {
    $("#show-search-results").show();
    const contactFirst = contact.firstName;
    const contactLast = contact.lastName;
    const contactPhone = contact.phoneNumber;
    const contactAddress = contact.address;
    $(".first-name").text(contactFirst);
    $(".last-name").text(contactLast);
    $(".phone-number").text(contactPhone);
    $(".address").text(contactAddress);
    let button = $("#delete-button");
    button.empty();
    button.attr("name", contactFirst);
    button.append("<button class='deleteButton'>Delete</button>");
  } else {
    $("#yes-results").hide();
    $("#no-results").text("No result matches your search, try again?");
  }
}

let addressBook = new AddressBook();

$(document).ready(function () {
  $("#add-form").on("submit", function (event) {
    event.preventDefault();

    // creating variables storing input from addform
    const firstNameForm = $("[name=new-first-name]").val();
    const lastNameForm = $("[name=new-last-name]").val();
    const phoneNumberForm = $("[name=new-phone-number]").val();
    const addressForm = $("[name=new-address]").val();

    $("[name=new-first-name]").val("");
    $("[name=new-last-name]").val("");
    $("[name=new-phone-number]").val("");
    $("[name=new-address]").val("");

    let newContact = new Contact(
      firstNameForm,
      lastNameForm,
      phoneNumberForm,
      addressForm
    );

    addressBook.addContact(newContact);
    displayContacts(addressBook);
  });
});

$(document).ready(function () {
  $("#search-form").on("submit", function (event) {
    event.preventDefault();

    // creating variables storing input from searchform
    const searchForm = $("[name=searchterm]").val();
    $("[name=searchterm]").val("");
    const searchcontact = addressBook.searchContact(searchForm);
    showContact(searchcontact);
  });
});

$(document).ready(function () {
  $("#delete-button").on("click", function (event) {
    event.preventDefault();
    let contactDelFirst = $("#delete-button").attr("name");
    let contactToDelete = searchContact(contactDelFirst);
    addressBook.deleteContact(contactToDelete);
    showContact(contactToDelete);
  });
});

This is my HTML if needed:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Elise's Address Book</title>
    <link href="./Style.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="./Script.js"></script>
  </head>
  <body>
    <header>
      <h1>Elise's Address Book</h1>
    </header>
    <main>
      <section>
        <div id="search-contact">
          <h2>Search Contacts</h2>
          <form action="#" id="search-form">
            <div>
              <input
                type="text"
                name="searchterm"
                placeholder="Enter contact's full name"
              />
              <input type="submit" />
            </div>
          </form>
        </div>

        <div id="show-search-results">
          <div id="yes-results">
            <h2>Your Contact</h2>
            <p>First Name: <span class="first-name"></span></p>
            <p>Last Name: <span class="last-name"></span></p>
            <p>Phone Number: <span class="phone-number"></span></p>
            <p>Address: <span class="address"></span></p>
            <div id="delete-button"></div>
          </div>
          <div id="no-results">
            <span></span>
          </div>
        </div>

        <div id="contact-list">
          <h2>All Contacts</h2>
          <table id="contact-table-start">
            <tr>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Phone Number</th>
              <th>Address</th>
            </tr>
          </table>
        </div>

        <div id="add-contact">
          <h2>Add New Contact</h2>
          <form action="#" id="add-form">
            <div>
              <input
                type="text"
                name="new-first-name"
                placeholder="Enter first name"
                required
              />
              <input
                type="text"
                name="new-last-name"
                placeholder="Enter last name"
                required
              />
              <input
                type="text"
                name="new-phone-number"
                placeholder="Enter phone number (incl. country code)"
                pattern="^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$"
                required
              />
              <!--check pattern-->
              <input
                type="text"
                name="new-address"
                placeholder="Enter address"
                required
              />
              <input type="submit" />
            </div>
          </form>
        </div>
      </section>
    </main>
    <footer>
      <p>Coded by <em>Elise Verhoeye</em></p>
    </footer>
  </body>
</html>

My main concerns are:

• My search function isn't working as it should, it only ever outputs the first element in the array of contacts.
• The new contacts I am adding are being added into the first column, so it's a table within a table, even though my new HTML has td (table data) elements in it.

Does anyone know how I can get this fixed?

Many thanks in advance!