Form Validation Only Affecting One Field

Question

"use strict";

const form = document.getElementById('form');
const fullName = document.getElementById('full_name');
const email = document.getElementById('email');
const phone = document.getElementById('phone');
const country = document.getElementById('country');
const username = document.getElementById('username');
const password = document.getElementById('password');
const passwordConfirm = document.getElementById('password_confirm');
const agree = document.getElementById('agree');
const submit = document.querySelector('.submit');

form.addEventListener('submit', (e) => {
    e.preventDefault();

    validateForm();
    
});

function validateForm () {
    const checkFullName = fullName.value;
    const checkEmail = email.value.trim();
    const checkPhone = phone.value.trim();
    const checkCountry = country.value.trim();
    const checkUsername = username.value.trim();
    const checkPassword = password.value.trim();
    const checkPasswordConfirm = passwordConfirm.value.trim();
    let isValid = true;

    if(checkFullName === '') {
        setErrorFor(fullName.parentElement, `Please enter your name`);
        
    } else {
        setSuccessFor(fullName); 
        
    }

    if (checkUsername === '') {
        setErrorFor(username, `Username cannot be blank`);
    } else {
        setSuccessFor(username);
    }

    if (checkPassword === '' || checkPassword !== checkPasswordConfirm) {
        setErrorFor(password, `Re-enter password`);
    } else {
        setSuccessFor(password);
    }

}

let setErrorFor = function (input, message) {
    const formRow = document.querySelector('.form_row');
    const small = document.querySelector('small');

    small.textContent = message;
    formRow.className = 'form_row error';
}

let setSuccessFor = function (input) {
    const formRow = document.querySelector('.form_row');
    formRow.className = 'form_row success';
}

    body {
        background-color: #14274D;
        color: white;
        font-family: 'Farro';
    }
    
    body > * {
        padding: 0px;
        margin: 0px;
    }
    
    hr {
        width: 50%;
        color: #FC8C59;
    }
    
    
    label {
        color: #FC8C59;
        font-size: 1.2em;
    }
    
    input, textarea, fieldset {
        margin-bottom: 10px;
        color: white;
        border: 2px solid #FADF8F;
        background: #14274D;
        font-size: 1.2em;
    }

    .buttons {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }

    .registration {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        width: 35vw;
        background: rgb(250,223,143);
        background: radial-gradient(circle, rgba(250,223,143,1) 0%, rgba(251,189,121,1) 26%, rgba(252,140,89,1) 71%);
        border: 5px solid #FADF8F;
    }

    .registration #form {
        margin-top: 5%;
        margin-bottom: 5%;
    }

    .registration .form_row {
        position: relative;
        margin-bottom: 2.5%;
    }

    .registration input {
        display: block;
        width: 65%;
        margin-left: 5%;
        margin-bottom: 0px;
    }

    .registration select {
        background-color: #14274D;
        font-size: 1.2em;
        color: #FADF8F;
        margin-left: 5%;
        width: 65%;
        border: 2px solid #FADF8F;
    }

    .registration label {
        margin-left: 5%;
        margin-top: 5%;
        padding-top: 5%;
        color: white;
    }

    .registration input[type="checkbox"] {
        width: 5%;
        display: inline;
        margin-top: 0;
    }

    .registration label[for="agree"] {
        font-size: .9em;
        margin: 0;
    }

.registration .terms {
  display: flex;
  flex-direction: row;
  align-items: start; 
}

.terms label {
  padding: 0;
}

    .registration button {
        width: 45%;
        height: 50px;
        margin-top: 10%;
        margin-left: 0;
        background-color: #FC8C59;
        color: white;
        font-size: 1.5em;
        border: 2px solid #FADF8F;
    }

    .registration button:hover {
        transform: scale(115%);
        background-color: #14274D;
    }

    .registration .form_row:last-child {
        display: flex;
        justify-content: space-evenly;
    }

    .form_row.success input {
        border: 2px solid lime;
    }

    .form_row.error input {
        border: 2px solid red;
    }

    .registration small {
        font-size: .6em;
        margin-left: 5%;
        margin-bottom: 5%;
        visibility: hidden;
    }

    .registration i {
        font-size: 1em;
        position: absolute;
        top: 25px;
        left: 210px;
        visibility: hidden;
    }

    .registration .form_row:nth-of-type(4) .error i {
        top: 4px;
        left: 300px;
    }

    .registration .form_row:nth-of-type(4) .success i {
        top: 4px;
        left: 300px;
    }

    .form_row.success i.bx-check-circle  {
        color: lime;
        visibility: visible;
    }

    .form_row.error i.bx-error-circle  {
        color: red;
        visibility: visible;
    }

    .form_row.error small {
        visibility: visible;
        color: red;
    }

<main>
    <section id="a">
      <div class="registration">
        <form id="form">
          <div class="form_row">
            <label for="full_name">Full Name:</label>
            <input type="text" id="full_name" name="full_name" />
            <span> <i class='bx bx-check-circle'></i> </span>
            <span> <i class='bx bx-error-circle'></i> </span>
            <small>Try again!</small>
          </div>

          <div class="form_row">
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" />
            <span> <i class='bx bx-check-circle'></i> </span>
            <span> <i class='bx bx-error-circle'></i> </span>
            <small>Try again!</small>
          </div>

          <div class="form_row">
            <label for="phone">Phone Number:</label>
            <input type="tel" id="phone" name="phone" />
            <span> <i class='bx bx-check-circle'></i> </span>
            <span> <i class='bx bx-error-circle'></i> </span>
            <small>Try again!</small>
          </div>

          <div class="form_row">
            <label for="country">Country:</label>
            <br>
            <select id="country">
              <option>--Please Select A Country--</optionn>
              <option value="USA">United States of America</option>
              <option value="Candada">Canada</option>
              <option value="China">China</option>
              <option value="France">France</option>
              <option value="Germany">Germany</option>
              <option value="Japan">Japan</option>
              <option value="South Korea">South Korea</option>
              <option value="Mexico">Mexico</option>
              <option value="United Kingdom">United Kingdom</option>
            </select>
            <span> <i class='bx bx-check-circle'></i> </span>
            <span> <i class='bx bx-error-circle'></i> </span>
            <small>Try again!</small>
        </div>

          <hr />

          <div class="form_row">
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" />
            <span> <i class='bx bx-check-circle'></i> </span>
            <span> <i class='bx bx-error-circle'></i> </span>
            <small>Try again!</small>
          </div>

          <div class="form_row">
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" />
            <span> <i class='bx bx-check-circle'></i> </span>
            <span> <i class='bx bx-error-circle'></i> </span>
            <small>Try again!</small>
          </div>

          <div class="form_row">
            <label for="password_confirm">Confirm Password:</label>
            <input type="password" id="password_confirm" name="password_confirm" />
            <span> <i class='bx bx-check-circle'></i> </span>
            <span> <i class='bx bx-error-circle'></i> </span>
            <small>Try again!</small>
          </div> 

          <div class="form_row terms">
            <input type="checkbox" id="agree" value="1" />
            <label for="agree"><div>Please confirm you read the Terms of Service.</div></label>
            <small class="error">Try again!</small>
          </div>

          <div class="form_row">
            <button class="submit" type="submit">Register</button> 
            <button class="reset" type="reset"> Reset</button>
          </div>


        </form>
      </div>
    </section>
  </main>

For a school assignment I have to validate a form. The issue is that for whatever reason, the javascript will only change the Full Name field and will ignore the others. As I played around with the code a bit, I noticed that it applies all of the conditions to the Full Name field only and not to their respective fields. So for example, under the Full Name field, it'll say 'Please re-enter password' when it's not supposed to be there. I think the issue is with me using querySelector('.form_row') but I'm not sure what else to use in order to change the class of the div. So I guess my question would be, what do I have to do to get all the fields to respond accordingly and simultaneously?

<div class="registration">
 <form id="form">
  <div class="form_row">
   <label for="full_name">Full Name:</label>
   <input type="text" id="full_name" name="full_name" />
   <span> <i class='bx bx-check-circle'></i> </span>
   <span> <i class='bx bx-error-circle'></i> </span>
   <small class="message">Try again!</small>
</div>

 <div class="form_row">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />
  <span> <i class='bx bx-check-circle'></i> </span>
  <span> <i class='bx bx-error-circle'></i> </span>
  <small class="message">Try again!</small>
 </div>

 <div class="form_row">
  <label for="phone">Phone Number:</label>
  <input type="tel" id="phone" name="phone" />
  <span> <i class='bx bx-check-circle'></i> </span>
  <span> <i class='bx bx-error-circle'></i> </span>
  <small class="message">Try again!</small>
 </div>

 <div class="form_row">
  <label for="country">Country:</label>
  <br>
  <select id="country">
   <option>--Please Select A Country--</optionn>
   <option value="USA">United States of America</option>
   <option value="Candada">Canada</option>
   <option value="China">China</option>
   <option value="France">France</option>
   <option value="Germany">Germany</option>
   <option value="Japan">Japan</option>
   <option value="South Korea">South Korea</option>
   <option value="Mexico">Mexico</option>
   <option value="United Kingdom">United Kingdom</option>
  </select>
  <span> <i class='bx bx-check-circle'></i> </span>
  <span> <i class='bx bx-error-circle'></i> </span>
  <small class="message">Try again!</small>
 </div>

 <hr />

 <div class="form_row">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" />
  <span> <i class='bx bx-check-circle'></i> </span>
  <span> <i class='bx bx-error-circle'></i> </span>
  <small class="message">Try again!</small>
</div>

<div class="form_row">
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" />
  <span> <i class='bx bx-check-circle'></i> </span>
  <span> <i class='bx bx-error-circle'></i> </span>
  <small class="message">Try again!</small>
</div>

<div class="form_row">
  <label for="password_confirm">Confirm Password:</label>
  <input type="password" id="password_confirm" name="password_confirm" />
  <span> <i class='bx bx-check-circle'></i> </span>
  <span> <i class='bx bx-error-circle'></i> </span>
  <small class="message">Try again!</small>
 </div> 

 <div class="form_row terms">
  <input type="checkbox" id="agree" value="1" />
  <label for="agree"><div>Please confirm you read the Terms of Service.</div></label>
  <small class="error">Try again!</small>
 </div>

 <div class="form_row">
  <button class="submit" type="submit">Register</button> 
  <button class="reset" type="reset"> Reset</button>
 </div>


</form>
</div>



const form = document.getElementById('form');
const fullName = document.getElementById('full_name');
const email = document.getElementById('email');
const phone = document.getElementById('phone');
const country = document.getElementById('country');
const username = document.getElementById('username');
const password = document.getElementById('password');
const passwordConfirm = document.getElementById('password_confirm');
const agree = document.getElementById('agree');
const submit = document.querySelector('.submit');

form.addEventListener('submit', (e) => {
    e.preventDefault();

    validateForm();
    
});

function validateForm () {
    const checkFullName = fullName.value;
    const checkEmail = email.value.trim();
    const checkPhone = phone.value.trim();
    const checkCountry = country.value.trim();
    const checkUsername = username.value.trim();
    const checkPassword = password.value.trim();
    const checkPasswordConfirm = passwordConfirm.value.trim();

    if(checkFullName === '') {
        setErrorFor(fullName, `Please enter your name`);
    } else {
        setSuccessFor(fullName);
    }

    if (checkUsername === '') {
        setErrorFor(username, `Username cannot be blank`);
    } else {
        setSuccessFor(username);
    }

    if (checkPassword !== checkPasswordConfirm) {
        setErrorFor(password, `Password does not match`);
    } else {
        setSuccessFor(password);
    }

}

function setErrorFor(input, message) {
    const formRow = document.querySelector('.form_row');
    const small = document.querySelector('small');

    small.textContent = message;
    formRow.className = 'form_row error';
}

function setSuccessFor (input) {
    const formRow = document.querySelector('.form_row');
    formRow.className = 'form_row success';
}

Here is a link for a visual aid: My Codepen

Can someone point me in the right direction?