JS Button not responding on IOS

musicqueue-pwa.firebaseapp.com

The buttons on the site above work on every platform perfectly except IOS.

Desktop: Works on ever browser Android: Works on every browser IOS: Buttons do not work on chrome or safari

I have tried adding Cursor: pointer; to my CSS. On IOS the Login buttons work fine. Just the login spotify button is not clickable on IOS. I have also tried switching click with touchstart.

Using Bootstrap CSS

<div class="col-lg-6">
<h3 id="spotifyHeader"><b>STEP 2:</b> Authenticate With Spotify</h3>
     <div id="login">
       <!--button to login with Spotify -->
       <button type="button" id="login-button" class="btn btn-primary btn-md">Log in with Spotify</button>
     </div>
     <div id="loggedin">
       <div id="user-profile">
       </div>
       <div id="oauth">
       </div>
     </div>
</div>

Following is the JS CODE

  document.getElementById('login-button').addEventListener('click', function() {
       localStorage.setItem(stateKey, state);
       var scope = 'playlist-read-private playlist-modify-private playlist-read-collaborative user-library-modify user-read-private user-read-email';
       var client_id = '1d962f7FAKEIDHAHAHA6f6c29d45bf'; // Your client id
       var redirect_uri = 'http://ift.tt/2vdWlp3'; // Your redirect uri
       var state = generateRandomString(16);
       localStorage.setItem(stateKey, state);
       var url = 'http://ift.tt/UPdH6F';
       url += '?response_type=token';
       url += '&client_id=' + encodeURIComponent(client_id);
       url += '&scope=' + encodeURIComponent(scope);
       url += '&redirect_uri=' + encodeURIComponent(redirect_uri);
       url += '&state=' + encodeURIComponent(state);
        window.location = url;
     }, false);