How to shuffle list items randomly in JavaScript

Question

I was trying to make a word fill quiz but got stuck in between:

1. looking to shuffle randomly the list items

2. If the guess is right then how to get to the next blank

   Jsfiddle

$(".btn-container li").click(function () {
  let val = $(this).text();
  $(".blank:empty:first").html(val);
  var optionIndex = $(this).index();
  if (optionIndex === blankIndex) {
    $(this).prop("disabled", true).addClass('disable');
    console.log('right');
  } else {
    console.log('wrong');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content-container">
        <p>The bluebird <span class="blank"></span> the <span class="blank"></span> on his <span class="blank"></span></p>
     </div>
    
<div class="btn-container">
  <ul id="my_div">
    <li><a href="#">carries</a></li>
    <li><a href="#">sky</a></li>
    <li><a href="#">back</a></li>
   </ul>
</div>

Answer 1

here I found easy logic https://stackoverflow.com/a/11972692/6631280

var ul = document.querySelector('#my_div');
for (var i = ul.children.length; i >= 0; i--) {
    ul.appendChild(ul.children[Math.random() * i | 0]);
}

<div class="content-container">
        <p>The bluebird <span class="blank"></span> the <span class="blank"></span> on his <span class="blank"></span></p>
     </div>

    <div class="btn-container">
       <ul id="my_div">
          <li><a href="#">carries</a></li>
          <li><a href="#">sky</a></li>
          <li><a href="#">back</a></li>
       </ul>
    </div>