jQuery function change doesn't run

Question

I have this code:

$(document).ready(function () {
    $("#inputID").change(function () {
        alert("The text has been changed.");
    });
});

// UPLOAD NEW DATA BUTTON FUNCTIONS
function createFireBaseData() {
    let id = (Math.floor(100000 + Math.random() * 900000));
    setFields();
    let createProductHTML = `
    <div class="form-row">
    <div class="form-group col-md-2">
            <input type="text" class="form-control neutral-valid" id="inputID" value="${id}">
    </div>

    <div class="form-group col-md-8">
        
        <input placeholder="Megnevezés" type="text" class="form-control" id="inputName">
    </div>
    <div class="form-group col-md-2">
    
    <div class="input-group">
  <div class="input-group-prepend">
    <label class="input-group-text" for="inputNumberOfImages">Képek</label>
  </div>
  <select class="custom-select" id="inputNumberOfImages">
    <option selected>0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
</div>
        
        
    </div>
</div>
<div class="form-row">
    <div class="form-group col-md-2">
    
        <input placeholder="Ár" type="text" class="form-control" id="inputPrice">
    </div>

    <div class="form-group col-md-10">
    
        <input placeholder="Mottó" type="text" class="form-control" id="inputMotto">
    </div>
</div>
<div class="form-group">
 
    <textarea placeholder="Leírás" class="form-control" id="inputDescription"
        rows="5"></textarea>
    </div>
    <button id="uploadButton" onclick="startUpload()" class="btn btn-block btn-success">FELTÖLTÉS</button>`
    $('#createProduct').html(createProductHTML);
    checkID();
}

function setFields() {
    document.getElementById('get-div').style.display = "none";
    document.getElementById('filler-left').classList.replace('col-md-4', 'col-xl-2');
    document.getElementById('maincontent').classList.replace('col-md-4', 'col-xl-8');
    document.getElementById('filler-right').classList.replace('col-md-4', 'col-xl-2');
}

function startUpload() {
    var id = document.getElementById('inputID').value;
    if (id.length != 6) {
        alert('A cikkszám nem hatjegyű!')
    } else {
        alert('Feltöltés...')
        // ADDITONAL UPLOAD OR FIELD-CHECK FUNCTIONS
    }
}

function checkID() {
    let docIDArray = [];
    let matchID = false;
    const db = firebase.firestore();
    db.collection("products").get().then(function (querySnapshot) {
        querySnapshot.forEach(function (doc) {
            docIDArray.push(doc.id);
        })
        let inputIDValue = document.getElementById('inputID').value;
        for (let i = 0; i < docIDArray.length; i++) {
            if (docIDArray[i] === inputIDValue) {
                matchID = true;
            }
        }
        if (matchID === true) {
            document.getElementById('inputID').classList.replace('neutral-valid', 'is-invalid');
            alert('Létező cikkszám, a termék minden adata felülírásra kerül!')
        } else {
            document.getElementById('inputID').classList.replace('neutral-valid', 'is-valid');
        }
    });
}

The code above creates an upload form with some input fields, and put a 6-digit random number to the article ID input field.

I'd like to add a function when this the user modify this ID. However, this part below does nothing:

"$("#inputID").change(function () {
        alert("The text has been changed.");
    });"

If I copy it to the console, after the page has been loaded, it does work. Why is it does not work immediately?

Thank you,