How to shuffle cards - JavaScript

I'm trying to make a card matching game in JavaScript where every time the user starts the game, the cards shuffle. If they flip two of the same cards the get a point added to their score. I have the card matching aspect working using a data framework on each card div, but this immediately invoked shuffle card function I've added isn't working. Thank you in advance!

JavaScript of Shuffling the Cards:

const cards = document.querySelectorAll(".the-card");

(function shuffle() {
  cards.forEach(card => {
    let randomPos = Math.floor(Math.random() * 12);
    card.style.order = randomPos;
  });
})();

HTML of Each Card(16 in total):

<div class="main-card-container">
<div class="the-card" data-framework="twoofhearts">

   <div class="the-back card-face">
      <img src="./images/cardback.png" class="flipped-card" 
   </div>
   <div class="the-front card-face">
      <img src="./images/img-1.png" class="unflipped-card" 
   </div>

</div>        
</div>

Via Active questions tagged javascript - Stack Overflow https://ift.tt/sfuGTxU