<div class="pricing-table">
    <div class="pricing-header">
        <h3>Wybierz czas trwania pakietu:</h3>
    </div>
    <div class="pricing-buttons">
        <button class="btn btn-primary" id="btn30days">30 dni</button>
        <button class="btn btn-primary" id="btn90days">90 dni</button>
    </div>
    <div class="pricing-header">
        <h3>Wybierz częstotliwość wysyłania raportów:</h3>
    </div>
    <div class="pricing-buttons">
        <button class="btn btn-primary" id="btn7days">Co 7 dni</button>
        <button class="btn btn-primary" id="btn14days">Co 14 dni</button>
    </div>
</div>

<script type="rocketlazyloadscript">
    // Funkcja, która zostanie wywołana po kliknięciu na przyciski czasu trwania pakietu
    function onDurationButtonClick(duration) {
        // Wyświetlenie wybranego czasu trwania pakietu na stronie
        document.getElementById('duration').innerHTML = duration;
    }

    // Funkcja, która zostanie wywołana po kliknięciu na przyciski częstotliwości wysyłania raportów
    function onReportButtonClick(reportFreq) {
        // Wyświetlenie wybranej częstotliwości wysyłania raportów na stronie
        document.getElementById('report-freq').innerHTML = reportFreq;
    }

    // Przypisanie funkcji do przycisków czasu trwania pakietu
    document.getElementById('btn30days').addEventListener('click', function() { onDurationButtonClick('30 dni'); });
    document.getElementById('btn90days').addEventListener('click', function() { onDurationButtonClick('90 dni'); });

    // Przypisanie funkcji do przycisków częstotliwości wysyłania raportów
    document.getElementById('btn7days').addEventListener('click', function() { onReportButtonClick('co 7 dni'); });
    document.getElementById('btn14days').addEventListener('click', function() { onReportButtonClick('co 14 dni'); });
</script>

<div>Wybrany czas trwania pakietu: <span id="duration"></span></div>
<div>Wybrana częstotliwość wysyłania raportów: <span id="report-freq"></span></div>