Making < div > appear in a random order and in random position

I'm tryng to create a minigame using javascript, html and css. It is structured as a table 4x4. Every row of my table is memorized inside a < section > tag. Each < section > cointains 4 < div >s. I would like to make one random element of the table appear when I hit a button. Also, it would be great to have elements appear in a random order.

Here's part of my code:

<section class="oggettoElements">
            <i class="far fa-newspaper oggetto"         draggable="true" style="color: #0000FF;" id="11"></i>
            <i class="fas fa-wine-glass-alt oggetto"    draggable="true" style="color: #008000;" id="21"></i>
            <i class="fas fa-wine-bottle oggetto"       draggable="true" style="color: #FFD700;" id="31"></i>
            <i class="fas fa-apple-alt oggetto"         draggable="true" style="color: #8B4513;" id="41"></i>
        </section>
        <section class="oggettoElements">
            <i class="far fa-newspaper oggetto"         draggable="true" style="color: #0000FF;" id="12"></i>
            <i class="fas fa-wine-glass-alt oggetto"    draggable="true" style="color: #008000;" id="22"></i>
            <i class="fas fa-wine-bottle oggetto"       draggable="true" style="color: #FFD700;" id="32"></i>
            <i class="fas fa-apple-alt oggetto"         draggable="true" style="color: #8B4513;" id="42"></i>
        </section>
        <section class="oggettoElements">
            <i class="far fa-newspaper oggetto"         draggable="true" style="color: #0000FF;" id="13"></i>
            <i class="fas fa-wine-glass-alt oggetto"    draggable="true" style="color: #008000;" id="23"></i>
            <i class="fas fa-wine-bottle oggetto"       draggable="true" style="color: #FFD700;" id="33"></i>
            <i class="fas fa-apple-alt oggetto"         draggable="true" style="color: #8B4513;" id="43"></i>   
        </section>
        <section class="oggettoElements">
            <i class="far fa-newspaper oggetto"         draggable="true" style="color: #0000FF;" id="14"></i>
            <i class="fas fa-wine-glass-alt oggetto"    draggable="true" style="color: #008000;" id="24"></i>
            <i class="fas fa-wine-bottle oggetto"       draggable="true" style="color: #FFD700;" id="34"></i>
            <i class="fas fa-apple-alt oggetto"         draggable="true" style="color: #8B4513;" id="44"></i>
        </section>
</section>

So, my goals are: - have a function to make one element at a time appear (I'll call it with an onClick attribute in a button). The element will be a random one from the table. - have a shuffle function which makes elements appear in a random position (not always like "newspaper-wineglass-winebottle-apple")

Can anybody help me? Thank you very much