javascript - Subscription system not working after clicking button

Question

I have the following code:

Button:

<br>
<p>Programma's waarop u kunt abonneren:</p>
<form action="#" enctype="multipart/form-data" method="post" onSubmit="return processForm();">
    <?php wp_nonce_field( 'set_programma_action', 'set_programma' ); ?>
    <table>
        <?php foreach ( $retrieve_data as $retrieved_data ) { ?>
            <tr>
                <th>Programma:</th>
                <td id="hideit" style="vertical-align: middle;">
                <?php
                 echo $alreadysub; echo esc_html( $retrieved_data->Anaam );
                 ?>
                 </td>
                <th>
                <div><button id="some_id" style="display:block" onclick="hidenow('hideit')" name="programma" type="submit" value="<?php echo esc_attr( $retrieved_data->Anaam ); ?>">Abonneer</button></div>
                </th>
            </tr>
        <?php } ?>
    </table>
</form>

Javascript:

<script>
var divelement = document.getElementById("some_id");
window.addEventListener('DOMContentLoaded', function(){
    if(localStorage.getItem("form_submitted")){
        divelement.style.display = 'none';
    }else{
        //Local Storage Not Set
    }
});

function processForm(){
    //Send Ajax to submit data and after its response set the local Storage
    divelement.style.display = 'none';
    //Set
    localStorage.setItem("form_submitted", 1);
    return false; //this will prevent form from submitting and refreshing the page.
}

Once the user clicks a button, he/she is subscribing to a program. To allow the user to subscribe to a program, I created the following code:

if (isset( $_POST['programma'] ) && isset( $_POST['set_programma'] ) && wp_verify_nonce( $_POST['set_programma'], 'set_programma_action' )) {

    $data = filter_input( INPUT_POST, 'programma', FILTER_SANITIZE_STRING );
    $current_user_id = get_current_user_id();

    if ( $current_user_id && ! empty( $data ) ) {
        //voeg de huidige user_id en data toe in de rij met meta_key programma
        $addprog = add_user_meta( $current_user_id, 'programma', $data );
        echo "U bent geabonneerd op". ' ' . $data;
    }
}
?>

I created the Javascript code to make sure that once the user is subscribed to a program, the button he clicked on along with the program dissapear. The only problem I have is that the user is not able to subscribe to a program anymore. The program is also not saved in the database. I have searched for several youtube videos on the issue but I cannot find a solution.

Also, for some reason, only the top button dissapears when clicked on. Not the buttom.

I am trying to put the button and the element inside of it in none display as soon as it is pressed. See image down here for the 2 buttons.

Answer 1

Here is the solution if you want all the button to hide when form is submitted.For this you have to use class instead of id.

var divelement = document.getElementsByClassName("some_class");

function hideByClass(){
    for(var i = 0; i < divelement.length; i++){
                divelement[i].style.display = "none";
            }
}
window.addEventListener('DOMContentLoaded', function(){
    if(localStorage.getItem("form_submitted")){
         hideByClass();
    }else{
        //Local Storage Not Set
    }
});


function processForm(){
    //Send Ajax to submit data and after its response set the local Storage
    hideByClass();
    //Set
    localStorage.setItem("form_submitted", 1);
    return true;
}

And use class instead of id.You also have to use class on td as it is also in loop so id should not repeat.

<div><button class="some_class" style="display:block" onclick="hidenow('hideit')" name="programma" type="submit" value="<?php echo esc_attr( $retrieved_data->Anaam ); ?>">Abonneer</button></div>