title: Changing font-awesome icon on click without reloading the page
body: <p>I have implemented font awesome in my project. Everything works fine. </p>
  
  <p>So I have written some jqyuery to change the clicked font-awesome icon to another icon (empty square -> checked square) using this code:</p>
  
  <pre><code>    function checkTask(){
      // Dit loopke zodanig dat we dit doen voor alle taken
      $(".status").on('click' , function(a){
          a.preventDefault();
          var klikedItem = $(this).parent().attr('id');
          var Deid = klikedItem.slice(5, 6);
          console.log("idnvanelement" + Deid);
          if($(this).hasClass('fa-square-o')){
              localStorage.setItem("Status-" + Deid, 'klaar');
          } else {
              localStorage.setItem("Status-" + Deid, 'nietklaar');
          }
      });
  
      var lengthNumber = localStorage.getItem('TaskNumber');
      for( i=1; i &lt;= lengthNumber; i++) {
      if (localStorage.getItem("Status-" + i) == 'klaar'){
          $("#task-" + i + "&gt; a.status").removeClass('fa-square-o').addClass('fa-check-square-o');
      }
      }
  }
  checkTask();
  </code></pre>
  
  <p>So what this code does, is, if the element is clicked, change the font-awesome class. But, the logo doesnt's change then. Therefore, I have to reload the page. But I don't want that.</p>
  
  <p>How can I still change the font-awesome logo without reloading the page?
  I have tried to use ajax, but without succes.
  JSfiddle comming up if you guys like!</p>