Material second text field label not moving

I am having issues with the label animation on my second text field not moving when the focus,

HTML:

        <div class="mdc-text-field mdc-text-field--outlined">
            <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                    <label class="mdc-floating-label">Pre-Tax Income</label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
            </div>
            <div class="mdc-text-field__affix mdc-text-field__affix--prefix">£</div>
            <input type="number" class="mdc-text-field__input" id="income" required>
        </div>

        <br /><br />

        <div class="mdc-text-field mdc-text-field--outlined">
            <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                    <label class="mdc-floating-label">Deductions (e.g. Pension)</label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
            </div>
            <div class="mdc-text-field__affix mdc-text-field__affix--prefix">£</div>
            <input type="number" class="mdc-text-field__input" id="deductions">
        </div>

JS:

import { MDCTextField } from '@material/textfield';
const textField = new MDCTextField(document.querySelector('.mdc-text-field'));

SCSS:

@use "@material/floating-label/mdc-floating-label";
@use "@material/line-ripple/mdc-line-ripple";
@use "@material/notched-outline/mdc-notched-outline";
@use "@material/textfield";

@include textfield.core-styles;

Material 10.0 and compiled with webpack 5.24.3

Any suggestions..?

Answer

This works for only the first element.

const textField = new MDCTextField(document.querySelector('.mdc-text-field'));
    

Please try :

let mdcFields = document.getElementsByClassName('mdc-text-field');

for(let field of mdcFields) {

 let textField = new MDCTextField(field);

 textField.callMethods()...
}