Issue with hidden input fields

Expected behavior Input label to reset back to active state. I have tried using both of the following after the input fields are shown:

    document.querySelectorAll('.form-outline').forEach((formOutline) => {
  new mdb.Input(formOutline).init();
});

    document.querySelectorAll('.form-outline').forEach((formOutline) => {
  new mdb.Input(formOutline).update();
});

But neither of these seem to have any effect on changing the input field label. To be clear, the input field is re-activating when it's displayed, but the border of the input field is going behind the label, causing it to be unreadable. I am doing pages of input fields that are hidden/revealed when you go to a new page. If you click on one field and change the field value, the label/border corrects itself, but ONLY on the first input field you click/change. If you try to do that on the rest of the inputs, nothing happens. They all have unique ids and all the labels match the ids of the input fields. I have all my input fields active on load because I am treating them as number input fields that default to 1. I can get a screenshot, but the code is too vast to try and recreate a code snippet. Below is the snippet for the input field, there are atleast 25 of these on each page, with a possibility of over 1k unique input fields hidden then shown. I tried running the above code snippets after i change pages and the input fields are revealed, but neither of them seem to fix this issue. Also should be stated that the php variable for product_id is unique and is never duplicated, therefore the input ids are never duplicated. I've even tried running these snippets on page load because my url changes can confirmed it's being called, but not fixing the issue. Please advise.

Actual behavior Input label only resets on first clicked input field but not any other field.

Resources (screenshots, code snippets etc.)

    <div class="form-outline w-75 mx-auto">
        <input
            type="number"
             id="_quantity_<?= $row['product_id'] ?>"
             class="form-control"
              value="1"
              min="1"
              />
<label class="form-label" for="_quantity_<?= $row['product_id'] ?>">Quantity</label>
</div>