Show/Hide div Ajax Jquery

Question

Kinda stuck a lot of hrs on this but i cant find out .parent() or next() or .next All() for this
I want to show div named .SubQuestion on ajax success when .input-range slider value is something Eveything work perfect except

$(this).next(".SubQuestion").show();

and

$(this).next(".SubQuestion").hide();

i can not find my div class display and css does not work

<div class="row">
    <div class="col-9 my-1 input-ranges" id="range">
        @{ var questionId = Model.QuestionAndAnswer[i].QuestionId;
            var AcceptableScore = Model.QuestionAndAnswer[i].QuestionAcceptableScore;
        }
        @Html.TextBoxFor(model => model.QuestionAndAnswer[i].Ans_Score, htmlAttributes: new { @id = questionId, @tag = AcceptableScore, @class = "input-range", @min = "1", @max = "10", @step = "1", @type = "range" })
        YourScore <span class="range-value">1</span>
    </div>

    <div class="col-3">
        <a data-toggle="collapse" href="#ScoreComment_@i" role="button" aria-expanded="false" aria-controls="collapseExample">
            <div class="fs-3x text-center text-info"><i class="la la-comment-o"></i></div>
        </a>
    </div>

    <div class="col-12 bg-info SubQuestion" style="display:none">
        <h1>Result</h1>
    </div>

    <div class="col-12">
        <div class="collapse my-1" id="ScoreComment_@i">
            @Html.TextAreaFor(model => model.QuestionAndAnswer[i].Ans_Score_Note, new { @class = "form-control p-1 w-100", @maxlength = "4000", @rows = "4", @placeholder = "توضیحات" })
        </div>
    </div>
</div>

<script>
      $(function ($) {
         console.log($.ajax);
         $('.input-range').on('change', function () {
             $(this).next('.range-value').html(this.value);

             var questionId = $(this).attr("id");
             var QAScore = $(this).attr("tag");
             var rangevalue = $(this).nextAll('.range-value').first().text();
             if (rangevalue < QAScore) {
                 $.ajax({
                     url: "/Question/GetSubQuestion",
                     type: "POST",
                     datatype: "json",
                     data: { QuestionId: questionId },
                     success: function (data) {
                         $(this).next(".SubQuestion").html(data);
                         $(this).next(".SubQuestion").show(); 
                     }
                 });
             }
             else {
                 $(this).parent().nextAll(".SubQuestion").hide();
             }
         });
     });

    </script>

Answer 1

Here was the solution Thanks to @AndrewLohr

$(function ($) {
    $('.input-range').on('change', function () {
        $(this).next('.range-value').html(this.value);
        let subQuestion = $(this).parent().nextAll(".SubQuestion").show();
        var questionId = $(this).attr("id");
        var QAScore = $(this).attr("tag");
        var rangevalue = $(this).nextAll('.range-value').first().text();
        if (rangevalue < QAScore && rangevalue!=10) {
            $.ajax({
                url: "/Question/GetSubQuestion",
                type: "POST",
                datatype: "json",
                data: { QuestionId: questionId },
                success: function (data) {
                    subQuestion.html(data);
                    subQuestion.show();
                }
            });
        }
        else {
            $(this).parent().nextAll(".SubQuestion").hide();
        }
    });
});