Changing font awesome icon onclick function

I'm trying to swap .fa-eye to fa-eye-slash when user click on a button. What am I doing wrong? It's not working.

HTML code:

<button onclick="arata_ascunde(this);" style="align:right;font-size:13px" 
class="btn btn-info " id="show_hide_bt" style="background-color:#00b0ff;"><i 
class="fa fa-eye"></i> Show</button>

Javascript code:

 function arata_ascunde(button) {
     var x = document.getElementById('showhide');
     var change = document.getElementById("show_hide_bt");

     if (x.style.display === 'none') {
       x.style.display = 'block';
     } else {
       x.style.display = 'none';
     }

     if (change.innerHTML == ' Show')
            {

                change.innerHTML = ' Hide';
                $(button).find('i').toggleClass('fa-eye').toggleClass('fa-eye-slash');
            }
            else {

                change.innerHTML = ' Show';
                $(button).find('i').toggleClass('fa-eye-slash').toggleClass('fa-eye');
            }


  }