I have a restricted page with entries for only-members in WordPress, and on this page there is a "View more" 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 ".se-mere-knap".

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.

I've made the code, based on user roles, for enqueue of the script to load the .js files in child theme functions.php:

     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);

Secondly, wiht help from @Digi Coder, the button-restrict-5.js is as following:

"use strict";

    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 < 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 ) >= 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 ); 

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.