Intl-tel-input library keeps throwing error on multiple elements

Question

I'm using the Intl-tel-input library to mask my phone number fields, I'm using multiple elements, however, only the first one is working, the 2nd and the 3rd are throwing Uncaught TypeError: Cannot read properties of null (reading 'getAttribute') error.

JS:

const account_phone = document.querySelector('#account-phone');
const delivery_phone = document.querySelector('#delivery-phone');
const signup_phone = document.querySelector('#signup-phone');

const account_iti = intlTelInput(account_phone, {
    utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.min.js',
});

const delivery_iti = intlTelInput(delivery_phone, {
    utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.min.js',
});

const signup_iti = intlTelInput(signup_phone, {
    utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.min.js',
});

HTML:

1)
<input type="text" name="phone" id="account-phone" />
2)
<input type="text" name="user_phone" id="signup-phone" />
3)
<input type="text" name="phone" id="delivery-phone" />

Notes:

• Each input is on a different page, when I tried this specific code in the same page, it worked
• Once I comment out any 2 of them, the 3rd one is working

What could the issue be?

Answer 1

It's because the browser was throwing an error since the variables were not really there, worked after I used a conditional. I hate vanilla JS.