element id different from the element passed to the getElementById() method and the code still worked, why? [closed]

I am following a project and studying it, but I have a question, how is it working to access this id through the getElementById(‘quantidade’) method, given that the id in the HTML element is like ‘id=’quantidade0”? o 0 não estaria faltando em getElementById?
codding HTML

 <div id="produto0"
  class="d-flex flex-row justify-content-between align-items-center pt-lg-4 pt-2 pb-3 border-bottom mobile">
     <div class="d-flex flex-row align-items-center">
           <div><img src="https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
                            width="150" height="150" alt="" 
  id="image"></div>
                    <div class="d-flex flex-column pl-md-3 pl-1">
                        <div>
                        <h6>COTTON T-SHIRT</h6>
                        </div>
                        <div>Art.No:<span class="pl-2">091091001</span></div>
                        <div>Color:<span class="pl-3">White</span></div>
                        <div>Size:<span class="pl-4"> M</span></div>
                    </div>
                </div>
                <div class="pl-md-0 pl-1"><b>R$50,00</b></div>
                <div class="pl-md-0 pl-2">
                    <span class="fa fa-minus-square text-secondary"></span>
                    <span class="px-md-3 px-1" id="quantidade0">0</span><span
                        class="fa fa-plus-square text-secondary"></span>
                </div>
                <div class="pl-md-0 pl-1"><b>R$</b> <span id="total0"></span></div>
                <div class="close">&times;</div>
            </div>

             <!----------------------------------------------------------------->
            <div id="produto1" class="d-flex flex-row justify-content-between align-items-center pt-4 pb-3 mobile">
                <div class="d-flex flex-row align-items-center">
                    <div><img
                            src="https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
                            width="150" height="150" alt="" id="image"></div>
                    <div class="d-flex flex-column pl-md-3 pl-1">
                        <div>
                            <h6>WHITE T-SHIRT</h6>
                        </div>
                        <div>Art.No:<span class="pl-2">056289891</span></div>
                        <div>Color:<span class="pl-3">White</span></div>
                        <div>Size:<span class="pl-4"> XL</span></div>
                    </div>
                </div>
                <div class="pl-md-0 pl-1"><b>R$30,00</b></div>
                <div class="pl-md-0 pl-2">
                    <span class="fa fa-minus-square text-secondary"></span>
                    <span class="px-md-3 px-1" id="quantidade1">0</span><span
                        class="fa fa-plus-square text-secondary"></span>
                </div>
                <div class="pl-md-0 pl-1"><b>R$</b>
                    <span id="total1"></span></div>
                <div class="close">&times;</div>
            </div>

        </div>
    </div>

—————————————————-enter code here

javascript code

function adicionarItem(item){ 
var quantidade = document.getElementById('quantidade0' + item)
}