Select form and validate input - forms

Question

There are three different forms for product types and static form for typing the general info. When I select given form I need to validate the inputs if there are only numbers. I already have the code for evaluate the static part of form. For chosing forms I used vue.js.
In the dynamic forms when Im selecting the specified form and than assigning to it an eventListener it only works for the first selection than it shows error:
Cannot read properties of null (reading 'addEventListener')
var selectElement = document.getElementById("productType");
selectElement.addEventListener("change", function() {
var selectedValue = selectElement.value;
> //The div to show notification
var notsize = document.getElementById("notifications");
if (selectedValue === "DVD") {
> //The input field in form
var dvd2 = document.getElementById("size");
dvd2.addEventListener("input", () => {
> //Validating
var contain2 = /^[a-zA-Z]+$/.test(dvd2.value);
if (contain2) {
notsize.textContent = "Please provide the data of indicated type";
} else {
notsize.textContent = "";
}
});
} else if (selectedValue === "Furniture") {
> //Also need to validate when switched
} else if (selectedValue === "Book") {
}
});
> //Here is the vue element
<select id="productType" v-model="selectedOption">
<option v-for="option in options" :key="option.value">{{ option.text }}</option>
</select>
How can I chose the form and implement the validation dynamically?