title: 'else' statement not executing when it should
body: <p>I have no syntax errors, nor ( can I see ) any logic errors, but the 'else' branch is not executing when it should ( I've added some alerts, to check this - but it appears the same 'if' code executes, even when the condition isn't met, i.e. on the second click of the same element) </p>
  
  <p>I've tried setting up 2 separate 'if' ONLY statements, to check the only 2 alternate states of the element - basically the button text, has a + or a -  sign in front of it ...</p>
  
  <pre><code>$('.device').click(function(){   
  var i = $('.device').index(this);    
  var str = $(this).text();            
     if($('.device').index(this) === i){         
       if($(this).html("&lt;i class='fas fa-plus'&gt;&lt;/i&gt;                " + str)){          
         $(this).html("&lt;i class='fas fa-minus'&gt;&lt;/i&gt;                " + str);
         $('.main').css("visibility", "visible");
         alert("HELLO");
       }
       else{         
          $(this).html("&lt;i class='fas fa-plus'&gt;&lt;/i&gt;                " + str);
          $('.main').css("visibility", "hidden");
          alert("GOODBYE");
       }
     }       
    });
  </code></pre>
  
  <p>I expect, the '.main' class to alternate between hidden and visible, and the plus sign to change to a minus, or vice-versa, but it only works for the first time i.e. plus to minus, hidden to visible element ( and HELLO in the alert window every time - which suggests it is executing ONLY the 'if' branch )</p>