Script defer with font-awesome not working

Question

I'm adding code to an existing shop that uses this line to load fontawesome.

    <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>

My jsfiddle for that is here As you can see, when the fontawesome hand is clicked, nothing happens. In the code in this jsfiddle, I changed the code to use the following and clicking on the icon now works as I want. Would someone please explain how to get the code to work with the first example?

    <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.7/css/all.css">

The code that is failing is below.

    <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>

    <div class="">
      <h4>Pages</h4>
      <nav class="nav nav-pills flex-column">
       <span><a href="http://example.com">Page 1</a> 
        <span class="more-kids far fa-thumbs-down arrow-kids" id="parent-1"></span><br />
        <span class="kids"><a class="text-secondary" href="http://example.com">Sub</a><br /></span>
       </span>  
      </nav>  
    </div>

    <script>
    $( document ).ready(function() {
      
     $(".more-kids").click(function() { 
       var this_item = $(this).nextAll(".kids");
       this_item.toggle();
       var id = this.id;
       $("#"+id).toggleClass('fa-thumbs-up fa-thumbs-down');   
     });
     
    });
    </script>