I have a button that is limited to 7 clicks, when clicking number 5 is disabled, My problem if the user login from different device, the count start againg in 0 same as refresh page.
my needs is, Save in user_meta the click number result and update if click again until click number 5 the button change to disabled.

In DB user_meta info:
user_id: user_id
meta_key:clickCounterTrav
meta_value: 1 (number of clicks)

Here is the code when page load, disable button if number of click is > 4 Do Not Work:

<script>
    window.addEventListener("load", ()=>{
   if(clickCounterTrav>4)
        document.getElementById("btnTraPack").disabled = true;
    if(clickCounterTrav>4)
        document.getElementById('btnTraPack').style.pointerEvents = 'none';
    if(clickCounterTrav>4)
        document.getElementById('btnTraPack').style.color = "#54595F";
    if(clickCounterTrav>4)
        document.getElementById('btnTraPack').style.borderColor = "#54595F";
    if(clickCounterTrav>4)
        document.getElementById("showResultsTra").style.visibility = "visible";
});

Here is the rest of code:

var clickCounterTrav = 0;

function CounterTrav() {
  clickCounterTrav += 1;
  document.getElementById("clickCounterTrav").innerHTML = clickCounterTrav + " Travel Pack you have Shared!";
  
    if(clickCounterTrav>4)
        document.getElementById('btnTraPack').style.pointerEvents = 'none';
    if(clickCounterTrav>4)
        document.getElementById('btnTraPack').style.color = "#54595F";
    if(clickCounterTrav>4)
        document.getElementById('btnTraPack').style.borderColor = "#54595F";
    if(clickCounterTrav>4)
    document.getElementById("resultTraveler").innerHTML = clickCounterTrav + " Travel Pack Shared.<br>Your Stock is Over!";
  if(clickCounterTrav>4)
  document.getElementById("showResultsTra").style.visibility = "visible";

console.log(clickCounterTrav); // 111
var CounterTrav_value = jQuery(this).attr('clickCounterTrav');
jQuery.ajax({
    url: '/wp-admin/admin-ajax.php',
        
        data : {
            action : 'CounterTrav_update', 
            CounterTrav_value : CounterTrav_value,
        },
        beforeSend: function() {
               console.log('Updating Field');
        },
        success : function( response ) {
             console.log('Success');
        },
        
    });
}
</script>

console log

1
Updating Field
Success

But in DB user_meta Did Not Update Any

functions.php

add_action( 'wp_ajax_CounterTrav_update', 'CounterTrav_update' );
add_action( 'wp_ajax_nopriv_CounterTrav_update', 'CounterTrav_update' ); // This lines it's because we are using AJAX on the FrontEnd.

function CounterTrav_update(){
    if(empty($_REQUEST) || !isset($_REQUEST)) {
        ajaxStatus('error', 'Nothing to update.');
    } else {
        try {
            $user = wp_get_current_user();
            $CounterTrav_value = $_POST['clickCounterTrav'];
            if ($CounterTrav_value == 'clickCounterTrav') {
                update_user_meta( $user->ID, 'clickCounterTrav', $_POST['clickCounterTrav'] );
            }
            die();
        } catch (Exception $e){
            echo 'Caught exception: ',  $e->getMessage(), "n";
        }
    }
} 

Please Can you Help Me?

$299 Affordable Web Design WordPress