Give specific format to an input with JS vanilla

Question

I'm working on creating a credit card with JS vanilla, I'm want that once the user type the numbers of the card, the only visible numbers are the last 4 digits.

**** **** **** 2345

So I thought I could give an ID to the not visible numbers ccHiddenNumbers and another id to the visible one ccNumber and wrote them in the HTML section where I want to print the input. As you can imagine I got an error, because of course since I was calling Ids in the printing place, not data was being received. <span id=ccHiddenNumber>**** **** **** </span> <span id=ccNumber>0000</span> Then I moved this ids to the input fields and I ended up getting confuse because the input should be just one that contains ccNumbers and ccHiddenNumbers together. And of course I keep getting the same error, even tho I already changed the ids to the input field.

Does anyone have a suggestion on how should I tackled this situation?

 

var cardNumbers= document.getElementById('cardNumbers')

    var ccNumber= document.getElementById('ccNumber').value;
    document.getElementById('ccHiddenNumber').ccNumber;
    console.log('this is the cc TOTAL NUMBER: '+ccNumber);
    var ccVisibleNumber = ccNumber.substring(ccNumber.length-4);
    console.log('this is the CC number: '+ ccVisibleNumber);
    document.getElementById('ccNumber').value = '**** **** **** '+ ccVisibleNumber;

cardNumbers.addEventListener('input', function () {
        if (cardNumbers.value.length === 0) {
            document.getElementById('cardNumbers').innerHTML = '**** **** **** 2345';
        } else {
            document.getElementById('cardNumbers').innerHTML = cardNumbers.value;
        }
    });

<!--input field-->
<div class="field-container">
        <label for="ccNumber">Card Number</label>
        <input id="ccNumber" type="text" pattern="[0-9]*" inputmode="numeric" placeholder="0000 0000 0000">
        <input id="ccHiddenNumber" type="text" pattern="[0-9]*" inputmode="numeric" placeholder="0000">
</div>

<!--printed info-->
 <span id=cardNumbers> **** **** **** 0000 </span>