Thanks to some wonderful help here at stack exchange, I have built a comment section with a dropdown menu that adds comment_meta to the comments.

I currently have a working filter that uses GET to trigger an if statement to query based on this comment_meta info. The thing I don't like is that it refreshes the page each time you click a button. I'm looking for a way to filter without having the page refresh. I think I need Javascript for this.

I've set up two sets of buttons. The top row is my GET buttons, which work, but refresh the page. The bottom row are my javascript buttons. I can get them to filter the text WITHIN the comments, but I'd like them to filter the entire contents instead.

For instance, if you go to Madonna's page (https://staging3.recordcollectorsoftheworldunite.com/artist/madonna/), and scroll down to the comments, they don't even show up until you press 'show all'. Once you press Show All it looks right, but again when you filter, it only filters the comments.

I've added 3 photos to the bottom of this post.

-First photo is when the page loads, how all the comments are hidden- I'd like ALL to automatically be selected when the page loads. I tried button class='button active' but that must not be the right way to say it.

-Second photo is when SHOW ALL is clicked

-Third photo is when BUY is clicked.

Here's my comments.php

?php
comment_form();
if (have_comments()) : ?
    div class=container
        div class=btn-group flex
            button type=button onclick=window.location.href='?php echo the_permalink();?/?cmeta=ALL'SHOW ALL/button
            button type=button onclick=window.location.href='?php echo the_permalink();?/?cmeta=BUY'BUY/button
            button type=button onclick=window.location.href='?php echo the_permalink();?/?cmeta=SELL'SELL/button
            button type=button onclick=window.location.href='?php echo the_permalink();?/?cmeta=TRADE'TRADE/button  
            button type=button onclick=window.location.href='?php echo the_permalink();?/?cmeta=TALK'TALK/button  
        /div  
    /div
    hr
    div class=container
        div class=btn-group flex
            button class=button active onclick=filterSelection('all') Show all/button
            button class=button onclick=filterSelection('BUY') BUY/button
            button class=button onclick=filterSelection('SELL') SELL/button
            button class=button onclick=filterSelection('TRADE') TRADE/button
            button class=button onclick=filterSelection('TALK') TALK/button
        /div  
    /div
    style
    .filterDiv {
    
    display: none;
    }

    .show {
    display: block;
    }

    .container {
    margin-top: 20px;
    overflow: hidden;
    }

    /style
    script
    filterSelection(all)
    function filterSelection(c) {
    var x, i;
    x = document.getElementsByClassName(filterDiv);
    if (c == all) c = ;
    // Add the show class (display:block) to the filtered elements, and remove the show class from the elements that are not selected
    for (i = 0; i  x.length; i++) {
        w3RemoveClass(x[i], show);
        if (x[i].className.indexOf(c)  -1) w3AddClass(x[i], show);
    }
    }

    // Show filtered elements
    function w3AddClass(element, name) {
    var i, arr1, arr2;
    arr1 = element.className.split( );
    arr2 = name.split( );
    for (i = 0; i  arr2.length; i++) {
        if (arr1.indexOf(arr2[i]) == -1) {
        element.className +=   + arr2[i];
        }
    }
    }

    // Hide elements that are not selected
    function w3RemoveClass(element, name) {
    var i, arr1, arr2;
    arr1 = element.className.split( );
    arr2 = name.split( );
    for (i = 0; i  arr2.length; i++) {
        while (arr1.indexOf(arr2[i])  -1) {
        arr1.splice(arr1.indexOf(arr2[i]), 1);
        }
    }
    element.className = arr1.join( );
    }

    // Add active class to the current control button (highlight it)
    var btnContainer = document.getElementById(myBtnContainer);
    var btns = btnContainer.getElementsByClassName(btn);
    for (var i = 0; i  btns.length; i++) {
    btns[i].addEventListener(click, function() {
        var current = document.getElementsByClassName(active);
        current[0].className = current[0].className.replace( active, );
        this.className +=  active;
    });
    }
    /script
    ?php
    if(isset($_GET['cmeta'])){
    
        $commentmeta=$_GET['cmeta'];
        if($commentmeta=='ALL'){
            $wantto= get_comment_meta( $comment_id, 'wantto', true );
            $args = array(
            'post_id' = get_the_ID(),
            
        );
        }else{
            $wantto= get_comment_meta( $comment_id, 'wantto', true );
            $args = array(
            'post_id' = get_the_ID(),
            'meta_query' = array(
            
                array(
                    'key' = 'wantto',
                    'value' = $commentmeta,
                ),
                
            )
        );
        }
        $comment_query = new WP_Comment_Query( $args );
        $comments = $comment_query-comments;
            echo 'ol class=post-comments';
                wp_list_comments(array(
                    'style'       = 'ol',
                    'short_ping'  = true,
                ));
                echo $wantto;
                
        echo '/ol';
        /* much simpler one to style probably
                        if ( $comments ) {
                    foreach ( $comments as $comment ) {
                        echo 'p' . $comment-comment_content . '/p';
                    }
                } else {
                    echo 'No comments found.';
                }
        */
    }else{

        $wantto= get_comment_meta( $comment_id, 'wantto', true );
        echo 'ol class=post-comments';
                wp_list_comments(array(
                    'style'       = 'ol',
                    'short_ping'  = true,
                ));
                echo $wantto;
                
        echo '/ol';
    }
endif;
    $comment_id=get_comment_ID();
    echo $wantto;
    
?

Here's the section from my functions.php that adds the dropdown menu, and filters by type. I've added the filterDiv tag in the second function of this part. Where I have it now only filters the text, I'd like it to filter the entire comment itself.

/*
 * This will add the fields to the comment form
*/
function wpse406058_custom_comment_fields() {

    echo 'p class=comment-form-wantto';
    echo 'label for=wanttoTag your comment so other users can find your post.brI want to/label';
    echo 'select id=wantto name=wantto class=myclass';
        echo 'option value=------/option';
        echo 'option value=BUYBUY/option';
        echo 'option value=SELLSELL/option';
        echo 'option value=TRADETRADE/option';
        echo 'option value=TALKTALK/option';
    echo '/select';
  
      
}
add_action( 'comment_form_logged_in_after', 'wpse406058_custom_comment_fields' );
add_action( 'comment_form_after_fields', 'wpse406058_custom_comment_fields' );

/*
 * This will field value as comment meta
*/
function wpse406058_save_custom_field($comment_id) {

    if ( isset($_POST['wantto'])  !empty($_POST['wantto']) ) {
        $wantto = sanitize_text_field($_POST['wantto']);
        update_comment_meta( $comment_id, 'wantto', $wantto );
        
    }
    
}
add_action( 'comment_post', 'wpse406058_save_custom_field' );


function wpse406058_display_comment_meta( $comment_text ) {
    
    $wantto = get_comment_meta( get_comment_ID(), 'wantto', true );
  
    if ( isset($wantto)  !empty($wantto) ) {
        
        $wanttotext = 'p class=wantosecI want to ' . esc_html($wantto) . '/p';
        ?div class=filterDiv ?php echo $wantto;??php
        $comment_text = $wanttotext . $comment_text;
    }
   echo 'div class=container';
    return $comment_text;
    echo '/div';
    echo '/div';
}
add_filter( 'comment_text', 'wpse406058_display_comment_meta' );