Next element with jQuery

I need to move on to the next element. My code shows 3 different cards and put the option in ddbb, but when click on the option I need to pass the ‘screen-view’ to the next card when sucess is ok.
I tried .next(‘.card’).toggle() and .show() but don’t work, any advice?

My template:

{% for standard in standards %}
<div class="card mx-auto mt-4" style="width: 95%;" data-aos="fade-up">
    <div class="card-header">
        <h5 class="card-title">Estándar {{standard.code}}</h5>
    </div>
    <div class="card-body">
        <p class="card-text">{{standard.name}}</p>
        <div class="card-text">
            <div class="table-responsive-sm tabla-standard" data-alternative-url="{% url 'answeruser' %}">
                <table class="table table-bordered">
                    <thead class="thead">
                        <tr>
                            {% for alternative in standard.alternative_set.visible %}
                            <th>
                                <div class="alternative color-{{forloop.counter}} {% if alternative.pk in answeruser_alternative_pks %} btnAlternativeFocus {% endif %}" data-alternative-pk="{{alternative.pk}}">
                                    <button class="btn btnAlternative-{{forloop.counter}}">{{alternative.name}}</button></div>
                            </th>
                            {% endfor %}
                        </tr>
                    </thead>
                    <tbody class="tbody">
                        <tr>
                            {% for alternative in standard.alternative_set.visible %}
                            <td>
                                <div class="alternativeDetail {% if alternative.pk in answeruser_alternative_pks %} btnAlternativeFocus {% endif %}">{{alternative.detail|safe|linebreaks}}</div>
                            </td>
                            {% endfor %}
                        </tr>
                    </tbody>
                    <tfoot class="tfoot">
                        <tr>
                            <th colspan="4">{{standard.diagnosis_tools|safe}}</th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>

{% endfor %}


<script type="text/javascript">
    AOS.init({
        duration: 1200,
    })

    $(document).on('click', '.alternative', function () {
        const $this = $(this)
        const alternative_pk = $this.data('alternative-pk');
        console.log(alternative_pk)

        const url = $('.tabla-standard').data('alternative-url');
        $.ajax({
            type: "POST",
            url: url,
            // dataType: 'json',
            // contentType: "application/json; charset=utf-8",
            data: {
                'alternative_pk': alternative_pk,
                'csrfmiddlewaretoken': getCookie('csrftoken')
            }, // serializes the form's elements.
            success: function (json) {
                if (json.success) {
                    console.log("ok")
                }
            }
        });

        $this.next('.card').toggle();
    })
</script>

Please help ;_;