Getting the parent div from a current div in jquery - html

Question

I have added a dynamic class called hello to the last question from the form. I am trying to traverse through the DOM to get the grandparent element .question-popup but for some reason it does not work. Ideally once I get to question-popup from hello I want to be able to get to the class="step-through-btn o-wrapper" to change the text of the button the "NEXT STEP".
$(".js-cme-next-question-button").click(function(){
$(".js-test-questions-wrap .c-cme-test:last .o-overlay__question").addClass("hello");
console.log($(".hello").closest(".question-popup"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="question-popup">
<div class="test-questions">
<div class="count">counter</div>
<div class="h6 u-text-grey o-overlay__question1 hello"> **hello added dynamically**
<div class="h6 u-text-grey o-overlay__question2">
<div class="h6 u-text-grey o-overlay__question3">
</div>
</div>
<div class="step-through-btn o-wrapper">
Next question
</div>

Answer 1

You can do so with plain javascript. But be warned your html code isn't well structured. But mine is so:
var hello = document.querySelector(".hello");
var parent = hello.closest(".question-popup");
var sibling = parent.nextElementSibling;
var button = sibling.querySelector(".c-button")
button.innerText = "NEXT STEP";
<div class="question-popup">
<div class="test-questions">
<div class="count">counter</div>
<div class="h6 u-text-grey o-overlay__question1 hello"> **hello added dynamically**</div>
<div class="h6 u-text-grey o-overlay__question2"></div>
<div class="h6 u-text-grey o-overlay__question3"></div>
</div>
</div>
<div class="step-through-btn o-wrapper">
Next question
</div>