title: How do I change font awesome icon and button class onclick?
body: <p>How do I change button class and font-awesome icon onclick? When I click on the button the class and icon should be changed and vice versa.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;button type="button" id="btn_hideshow" data-id="{{$user-&gt;id}}" class="btn btn-primary btn-sm btn_hideshow"&gt;
    &lt;i class="fa fa-eye"&gt;&lt;/i&gt;
  &lt;/button&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>$(function() {
    $(".btn_hideshow").click(function() {
      let id = $(this).data('id');
      $.ajax({
        url: "/user-hide-show/" + id,
        method: "POST",
        data: {
          'id': id
        },
        dataType: "json",
        success: function(data) {
          if ($("button#btn_hideshow").hasClass() == "btn btn-primary btn-sm") {
            $("button#btn_hideshow").removeClass("btn btn-primary btn-sm").addClass("btn btn-info btn-sm")
              .append().html("&lt;i class='fa fa-eye-slash'&gt;&lt;i/&gt;")
          } else {
            $("button#hideAndShow").removeClass("btn btn-info btn-sm").addClass("btn btn-primary btn-sm").append().html("&lt;i class='fa fa-eye'&gt;&lt;i/&gt;")
          }
        }
      });
    });
  });
  </code></pre>