Css – java Script give an error when i make new div

i have this html code

<div class="form-group">
          <label>Debt Type:</label>
          <select id="debtType" placeholder="Chose Type of Debt" required>
            <option value="" disabled selected hidden>Chose Type of Debt</option>
            <option value="Auto Loan"> Auto Loan</option>
            <option value="Student Loan"> Student Loan</option>
            <option value="Debt Card Loan"> Debt Card Loan</option>
            <option value="House Loan"> House Loan</option>
            <option value="others">others</option>
          </select>
          <p class="error"></p>
        </div>
        <div class="form-group">
          <label>Principal Amount:</label>
          <input type="number" id="principal" placeholder="Enter principal amount">
          <p class="error"></p>
        </div>
        <div class="form-group">
          <label>Annual Interest Rate :</label>
          <input type="number" id="rate" placeholder="Enter annual interest rate">
          <p class="error"></p>
        </div>
        <div class="form-group">
          <label>Monthly Payment:</label>
          <input type="number" id="payment" placeholder="Enter monthly payment">
          <p class="error"></p>
        </div>

in which i check the fields should not be empty with this peace of code

class FormValidator {
  constructor(fields) {
    this.fields = fields;
    this.isValid = true;
  }

  initialize() {
    this.validateOnEntry();
  }

  validateOnEntry() {
    let self = this;
    this.fields.forEach(field => {
      const input = document.querySelector(`#${field}`);
     
      input.addEventListener('input', () => {
        self.validateFields(input);
      });
    });
  }

  validateFields(field) {
    console.log(field.parentElement);
   const errorElement = field.parentElement.querySelector('.error');
  
    
    if (field.value.trim() === "") {
      this.setStatus(errorElement, "Please select item", "error");
      this.isValid = false; 
    } else {
      this.setStatus(errorElement, null, "success");
    }

    
    if (field.id === "principal" && isNaN(parseFloat(field.value))) {
      this.setStatus(errorElement, "Please enter principle", "error");
    }
    if (field.id === "rate" && isNaN(parseFloat(field.value))) {
      this.setStatus(errorElement, "Please enter the rate", "error");
    }
    if (field.id === "payment" && isNaN(parseFloat(field.value))) {
      this.setStatus(errorElement, "Please enter payment", "error");
    }
  }

  setStatus(errorElement, message, status) {
    if (status === "success") {
      errorElement.innerText = "";
    }

    if (status === "error") {
      errorElement.innerText = message;
    }
  }
}

const fields = ["debtType", "principal", "rate", "payment"];

const validator = new FormValidator(fields);
validator.initialize();

document.getElementById("calculateButton").addEventListener("click", function () {
  // Reset isValid before revalidation
  validator.isValid = true;

  fields.forEach(field => {
    const input = document.querySelector(`#${field}`);
    validator.validateFields(input);
  });

  if (validator.isValid) {
    addDebt(); // Call addDebt only if all fields are valid
  }
});

it work good but

when i add a new div on input tag like this

<div class="form-group">
          <label>Monthly Payment:</label>
          <div>

            <input type="number" id="payment" placeholder="Enter monthly payment">
          
          </div>
          <p class="error"></p>
        </div>

it give error so tell me how i can solve it and what should i use except field.parentElemet. this div i’m putting this div for put the svg in the input field