title: Limit clicks on button based on user role
body: <p>I have a restricted page with entries for only-members in WordPress, and on this page there is a &quot;View more&quot; button for each entry. I'm looking for a solution, to limit clicks for that specific button depending on which user role the user has assigned. The button has its own class &quot;.se-mere-knap&quot;.</p>
  <p>For example user role 1 needs to have 5 clicks on this button from the time the subscription was created. If they reach the limit of clicks, they are not able to access any entries anymore by clicking the button. The subscriptions run for a month, and there are different unique users, so it needs to reset for that specific user when 30 days have passed from the start of their subscription.</p>
  <p>I've made the code, based on user roles, for enqueue of the script to load the .js files in child theme functions.php:</p>
  <pre><code>     function add_custom_script_1() {
      
      if ( current_user_can( 'um_5-klik-test' ) ) {
          
      wp_register_script('custom_script_1', home_url() . '/button-restrict/button-restrict-5.js', array( 'jquery' ));
      wp_enqueue_script('custom_script_1');  
  }
  }
  
  add_action( 'wp_enqueue_scripts', 'add_custom_script_1', 999);
  </code></pre>
  <p>Secondly, wiht help from @Digi Coder, the button-restrict-5.js is as following:</p>
  <pre><code>&quot;use strict&quot;;
  
      viewmore_settings();
  
      // checks if the expiry date has elapsed
      function check_viewmore_expiry() {
          // set the current date
          var curDate = new Date().getTime();
          // get the difference between the expiry date and current date
          var distance = localStorage.expDate - curDate;
          // round up to get the exact date remaining
          var days = Math.floor( distance / ( 1000 * 60 * 60 * 24 ) );
          // log remaining date to the console
          console.log( days + ' days left.' );
          // check if the expiry date has elapsed
          if ( distance &lt; 0 ) {
              // log expiry message to the console
              console.log( 'Time Expired.' );
              // reset the expiry date to 30 days
              localStorage.expDate = new Date().setUTCSeconds( 60 * 60 * 24 * 30 );
              // reset the counter to zero
              localStorage.counter = 0;
          }
      }
  
      // disables view more button if counter limit is reached
      function viewmore_button_disabled() {
          // the html button that user clicks
          var btn = document.querySelector( 'button.se-mere-knap' );
          // check if user click action is up to five or greater than five
          if ( Number( localStorage.counter ) &gt;= 5 ) {
              // disable the button
              btn.disabled = true;
              // button is disabled
              return true;
          }
          // button is not disabled
          return false;
      }
  
      // Sets value for the counter and expiry date stored in local storage
      function viewmore_settings() {
          // check for local storage support
          if ( typeof Storage !== 'undefined' ) {
              // check if counter is not set in storage
              if ( localStorage.counter === undefined ) {
                  // set counter to zero
                  localStorage.counter = 0;
              }
              // check if expDate is not set in storage
              if ( localStorage.expDate === undefined ) {
                  // set expiry date to 30 days
                  localStorage.expDate = new Date().setUTCSeconds( 60 * 60 * 24 * 30 );
              }
              // check if the expiry date has elapsed
              check_viewmore_expiry();
              // disable view more button if counter limit is reached
              viewmore_button_disabled();
          } else {
              // display message for browsers that does not support storage
              window.alert( 'Din browser understøtter desværre ikke vores funktioner.' );
          }
      }
  
      // runs when user clicks the view more button
      function viewmore_func() {
          // check for local storage support
          if ( typeof Storage !== 'undefined' ) {
              // check if the expiry date has elapsed
              check_viewmore_expiry();
              // check if the view more button is disabled
              if ( viewmore_button_disabled() ) {
                  // display alert message for maximum click attempt
                  window.alert( 'Din grænse for antal klik ind på en jobsøgendes profil er nået. Du kan opgradere til flere klik, gennem din virksomhedsprofil. Antal af klik bliver nulstillet hver 30. dag.' );
              } else {
                  // increment counter for every user click action
                  localStorage.counter = Number( localStorage.counter ) + 1;
                  // log the counter value to console
                  console.log( localStorage.counter );
                  // redirect user to resource page or show user the content
                  window.location.assign( 'index.php' );
              }
          }
      }
  
  document.querySelector( 'button.se-mere-knap' ).addEventListener( 'click', viewmore_func ); 
  </code></pre>
  <p>I've created a user with this role to test with, but it doesn't work. Nothing happens when i exceed the limit of 5 click. No limit of clicks are set.</p>