Filling next available box with a random number, if first box is occupied - JS

very new to coding and this website in particular.

I am trying to create a 'Countdown'-style numbers game which involves trying to reach a target number using 6 random numbers. There are two categories of numbers: small numbers (1-10) and large numbers (25,50,75,100). I have created a button for each category which randomly generates a number within that category.

I am able to randomly generate these numbers and populate the first card slot using .onclick method, but I am unable to populate the next 5 card slots; every time I click it randomly generates a number in the same 1st card slot.

The goal is to populate the next card slot every time I click, not all slots at once. I am using JS. Please see attached code.

Apologies in advance for errors as this is my first post!

HTML:

//Click on small number button to generate a random small number
document.getElementById("small_number_card").onclick = function(){
    genSmallNumber();
}

document.getElementById("large_number_card").onclick = function(){
    genLargeNumber();
}



//FUNCTIONS//

//Generate random small number from array
function genSmallNumber(){
    var smallArray = Array(1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10);
    var smallNumber = smallArray[Math.floor(Math.random()*smallArray.length)];
    var cardSlot = 1;
    document.getElementById("box"+cardSlot).innerHTML = smallNumber;
}

//Generate random large number from array
function genLargeNumber(){
    var largeArray = Array(25,50,75,100);
    var largeNumber = largeArray[Math.floor(Math.random()*largeArray.length)];
    var cardSlot = 1;
    document.getElementById("box"+cardSlot).innerHTML = largeNumber;
}

<div id="container">

<div id="target_box">
    <div id="target_number_box">
        <span id="target">100</span>
            <div id="start_button">Start</div>
                <div id="selection_box">
                    <div class="box" id="box1"></div>
                    <div class="box" id="box2"></div>
                    <div class="box" id="box3"></div>
                    <div class="box" id="box4"></div>
                    <div class="box" id="box5"></div>
                    <div class="box" id="box6"></div>
                </div>
    </div>
</div>

<div id="whiteboard">
    <textarea id="working_area" placeholder="Use this area as a working space..."></textarea>
</div>

<div id="card_selection_box">
    <div id="small_number_box">
        Small number<br/>(1-10)
            <div class="number_card" id="small_number_card">
                S
            </div>
    </div>
        <div id="large_number_box">
            Large number<br/>(25, 50, 75, 100)
                <div class="number_card" id="large_number_card">
                    L
                </div>    
        </div>
</div>

<div id="counter_box">
    <span id="counter_value">30</span>
</div>

</div>

Thanks in advance! Please avoid JQuery type answers - I'm a noob!