I can't seem to get my JavaScript errors to appear under their respective form inputs. Right now they are all in a list under the contact form but I need them to be under each input.

How can I make sure they show up in the correct place without being in an unordered list?

HTML for the form:

Full Name*

Phone Number

Email Address

Preferred Method of Contact

Phone

Email

Comments*

JavaScript:

"use strict";

// verify form

let form = document.getElementById("fullForm");

function isFormValid(event) {

const nameRegex = /[A-Za-z]\s[A-Za-z]/i;

const errorList = document.getElementById("errorList");

const name = document.querySelector("#fullName");

const phone = document.querySelector("#phone");

const email = document.querySelector("#email");

// const emailError = document.getElementById('errorMsg').innerHTML = "Invalid or missing email address.";

// const phoneError = document.getElementById("#phoneError").innerHTML = "Invalid or missing phone number."

// const radio = document.getElementsByName("radio");

// const radio1 = document.getElementById("#selectedPhone");

// const radio2 = document.getElementById("#selectedEmail");

const phoneRegex = /^(\+\d{1,2}\s?)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/;

const regexEmail = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,5}$/;

const comments = document.querySelector("#comments");

// creating a list of errors

let errors = [];

errorList.classList.add("hide");

name.classList.remove("error");

email.classList.remove("error");

phone.classList.remove("error");

comments.classList.remove("error");

// preventing default

// event.preventDefault();

// check to see if name matches the nameRegex

if (!name.value.match(nameRegex)) {

errors.push("Please provide your full name.");

name.classList.add("error");

}

// check to see if phone matches phoneRegex

if (!phone.value.match(phoneRegex)) {

errors.push("Missing phone number.");

phone.classList.add("error");

}

// check to confirm there's an email match the regexEmail

if (!email.value.match(regexEmail) || email.value === "") {

errors.push("Missing email address.");

email.classList.add("error");

}

// HAVING ISSUES

// check if one of the radio buttons were selected

// if (!radio.checked) {

// errors.push("Please select a preferred method of contact.");

// radio.classList.add("error");

// }

// check if one of the radio buttons were selected

// if (button1.checked) {

// alert("radio1 selected");

// } else if (button2.checked) {

// alert("radio2 selected");

// } else if (!radio1.checked || !radio2.checked){

// errors.push("Please select a preferred method of contact.");

// radio1.classList.add("error");

// radio2.classList.add("error");

// }

// checking to see if there is anything in the comments box

if (comments.value === "") {

errors.push("Please leave a comment.");

comments.classList.add("error");

}

// check the amount of errors, if errors, then add them to a list

if (errors.length > 0) {

const errorList = document.querySelector("#errorList");

errorList.classList.remove("hide");

// errorList.innerHTML = "";

errors.forEach((error) => {

const li = document.createElement("li");

li.innerHTML = error;

errorList.appendChild(li);

});

}

}

document.getElementById("submit").addEventListener("click", function(event) {

isFormValid();

event.preventDefault();

});