shortcode – Js dom manipulation don’t work in shorcode


I am creating a little shortcode and for some reason JavaScript don’t work properly. I see that it starts good, but for some reason I can’t do any events or modify element css.

I have tried event listiners, they don’t work at all. Than I tried onclick events. They do work, but again, I can’t interact with elements in the shortcode.

What I want to do is change content inside sb-payment-method-info-cont after user click on any of the buttons.

Here is the shortcode (I left some src blank for privacy):

<?

function sb_payment_select_shortcode_scripts() {

    wp_register_script( 'mokejimu-pasirinkimas', get_stylesheet_directory_uri() . '/sb-payment-select/mokejimu-pasirinkimas.js', array('jquery'), null, true);
    wp_register_style( "mokejimu-pasirinkimas", get_stylesheet_directory_uri() . '/sb-payment-select/mokejimu-pasirinkimas.css');

    wp_enqueue_style("mokejimu-pasirinkimas");
    wp_enqueue_script( "mokejimu-pasirinkimas");
 
}
add_action( 'wp_enqueue_scripts', 'sb_payment_select_shortcode_scripts');

// mokėjimai
add_shortcode('mokejimu_pasirinkimas', 'sb_payment_select'); 

function sb_payment_select($atts) { 
    $data = shortcode_atts( array(
        'paysera' => true,
        'paysera_kodas' => "http://wordpress.stackexchange.com/",
        'aukojantiems_is_uzsienio' => true,
        'auka_telefonu' => true,
        'auka_i_saskaita' => true,
        'periodinis' => true,
        ), $atts );

    $names = ("paysera");

   
    $output = "<div class='sb-payment-container'>";
    if ($data("paysera") && $data("paysera_kodas") != "http://wordpress.stackexchange.com/"){
        $output .= "<button type='button' onclick='mokejimai(&quot;paysera&quot;)' class='sb-payment-method sb-button'>
                        <div class='sb-payment-method__icon sb-active'>
                            <img class='sb-payment-method__icon-shape' alt='paysera' src="https://wordpress.stackexchange.com/">
                        </div>
                        <div class='sb-payment-method__name'>
                            Elektroninė bankininkystė
                        </div>
                    </button>";
    }
    if ($data("aukojantiems_is_uzsienio") ){
        $output .= "<button type='button' onclick='mokejimai(&quot;aukojimasisuzsienio&quot;)' class='sb-payment-method sb-button'>
                        <div class='sb-payment-method__icon'>
                            <img class='sb-payment-method__icon-shape' alt='Aukojantiems iš užsienio' src="https://wordpress.stackexchange.com/">
                        </div>
                        <div class='sb-payment-method__name'>
                            Aukojantiems iš užsienio
                        </div>
                    </button>";
    }
    if ($data("auka_telefonu") ){
        $output .= "<button type='button' onclick='mokejimai(&quot;aukatelefonu&quot;)' class='sb-payment-method sb-button'>
                        <div class='sb-payment-method__icon'>
                            <img class='sb-payment-method__icon-shape' alt='Auka telefonu' src="https://wordpress.stackexchange.com/">
                        </div>
                        <div class='sb-payment-method__name'>
                            Auka telefonu
                        </div>
                    </button>";
    }
    if ($data("auka_i_saskaita") ){
        $output .= "<button type='button' onclick='mokejimai(&quot;aukaisaskaita&quot;)' class='sb-payment-method sb-button'>
                        <div class='sb-payment-method__icon'>
                            <img class='sb-payment-method__icon-shape' alt='Auka į sąskaitą' src="https://wordpress.stackexchange.com/">
                        </div>
                        <div class='sb-payment-method__name'>
                            Auka į sąskaitą
                        </div>
                    </button>";
    }
    if ($data("periodinis") ){
        $output .= "<button type='button' onclick='mokejimai(&quot;periodinismokejimas&quot;)' class='sb-payment-method sb-button'>
                        <div class='sb-payment-method__icon'>
                            <img class='sb-payment-method__icon-shape' alt='Periodinis mokėjimas' src="https://wordpress.stackexchange.com/">
                        </div>
                        <div class='sb-payment-method__name'>
                            Periodinis mokėjimas
                        </div>
                    </button>";
    }
    $output .= "</div>";
    $output .= "<div class='sb-payment-method-info-cont'>";
    // paysera aprašymas
    $output .= "<div id='paysera' class='sb-payment-method-info'>
                    <div class='sb-payment-method-info__inner-cont'>
                        <div class='sb-payment-method-info__instructions'>
                            Paspaudę mygtuką, būsite nukreipti į Paysera, kur galėsite pasirinkti aukojimo būdą per savo banką, kreditinę kortelę ir kitais būdais.
                        </div>
                        <div class='sb-payment-method-info__button'>
                            <a href='https://www.paysera.com/pay/?sign=".$data("paysera_kodas")."http://wordpress.stackexchange.com/" class='paysera'>
                                <img src="https://wordpress.stackexchange.com/" target='_blank'>
                            </a>
                        </div>
                    </div>
                </div>";
    // aukojantiems iš užsienio aprašymas
    $output .= "<div id='aukojimasisuzsienio' class='sb-payment-method-info sb-dont-show'>
                    <div class='sb-payment-method-info__inner-cont'>
                        <div class='sb-payment-method-info__instructions'>
                            Paspaudę mygtuką, būsite nukreipti į Paysera, kur galėsite pasirinkti aukojimo būdą per savo banką, kreditinę kortelę ir kitais būdais.
                        </div>
                        <div class='sb-payment-method-info__button'>
                            <a href='https://www.paysera.com/pay/?sign=".$data("paysera_kodas")."http://wordpress.stackexchange.com/" class='paysera'>
                                <img src="https://wordpress.stackexchange.com/" target='_blank'>
                            </a>
                        </div>
                    </div>
                </div>";
    // auka telefonu aprašymas
    $output .= "<div id='aukatelefonu' class='sb-payment-method-info sb-dont-show'>
                    <div class='sb-payment-method-info__inner-cont'>
                        <div class='sb-payment-method-info__instructions'>
                            Paspaudę mygtuką, būsite nukreipti į Paysera, kur galėsite pasirinkti aukojimo būdą per savo banką, kreditinę kortelę ir kitais būdais.
                        </div>
                        <div class='sb-payment-method-info__button'>
                            <a href='https://www.paysera.com/pay/?sign=".$data("paysera_kodas")."http://wordpress.stackexchange.com/" class='paysera'>
                                <img src="https://wordpress.stackexchange.com/" target='_blank'>
                            </a>
                        </div>
                    </div>
                </div>";
    // auka į sąskaitą aprašymas
    $output .= "<div id='aukaisaskaita' class='sb-payment-method-info sb-dont-show'>
                    <div class='sb-payment-method-info__inner-cont'>
                        <div class='sb-payment-method-info__instructions'>
                            Paspaudę mygtuką, būsite nukreipti į Paysera, kur galėsite pasirinkti aukojimo būdą per savo banką, kreditinę kortelę ir kitais būdais.
                        </div>
                        <div class='sb-payment-method-info__button'>
                            <a href='https://www.paysera.com/pay/?sign=".$data("paysera_kodas")."http://wordpress.stackexchange.com/" class='paysera'>
                                <img src="https://wordpress.stackexchange.com/" target='_blank'>
                            </a>
                        </div>
                    </div>
                </div>";
    // periodinis mokėjimas aprašymas
    $output .= "<div id='periodinismokejimas' class='sb-payment-method-info sb-dont-show'>
                    <div class='sb-payment-method-info__inner-cont'>
                        <div class='sb-payment-method-info__instructions'>
                            Paspaudę mygtuką, būsite nukreipti į Paysera, kur galėsite pasirinkti aukojimo būdą per savo banką, kreditinę kortelę ir kitais būdais.
                        </div>
                        <div class='sb-payment-method-info__button'>
                            <a href='https://www.paysera.com/pay/?sign=".$data("paysera_kodas")."http://wordpress.stackexchange.com/" class='paysera'>
                                <img src="https://wordpress.stackexchange.com/" target='_blank'>
                            </a>
                        </div>
                    </div>
                </div>";
    $output .= "</div>";

    // Output
    return $output;
} 

JavaScript:

function mokejimai(a) {     
    const mokejimaiInfo = document.querySelector(".sb-payment-method-info-cont");
    
    console.log(a);
    if (a == "paysera") {
        mokejimaiInfo.innerHTML = "Hello World";
    }
    if (a == "aukojimasisuzsienio") {

        aukojimasisuzsienio.classList.toggle("sb-dont-show");
    }
    if (a == "aukatelefonu") {

        aukatelefonu.classList.toggle("sb-dont-show");
    }
    if (a == "aukaisaskaita") {

        aukaisaskaita.classList.toggle("sb-dont-show");
    }
    if (a == "periodinismokejimas") {

        periodinismokejimas.classList.toggle("sb-dont-show");
    }

}