get the text inside an element above another element

I have the code below which renders a box with some information inside it. I need to get the text of some of the divs above the button which the user will click in order to get the information. I can't use ids as the rest of the page will have the same code again and again with different text.

<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade" id="dummy" role="tabpanel" aria-labelledby="tab">
    <div class="bg-light px-3 my-2">                          
        <div class="row align-items-center text-center">
        <div class="col-6 col-sm-4 col-lg-1 my-2">
            <span class="display-4 ws_day"><strong>04</strong></span>
            <br>
            <span class="ws_month"><strong>Jan</strong></span>
        </div>
        <div class="col-6 col-sm-4 col-lg-1 my-2">
            <img src="" />
        </div>
        <div class="col-12 col-sm-4 col-lg-2 my-2">
            <span><strong>Lorem</strong></span>
            <br>
            <span class="ws_time">6pm</span>
            <br>
            <span class="ws_timezone">(GTM+12:00)</span>
        </div>
        <div class="col-12 col-lg-4 my-2">
            <span class="h5 ws_title"><strong>Title</strong></span>
        </div>
        <div class="col-6 col-lg-2 my-2">
            <span><strong>Ipsum</strong></span>
            <br>
            <span><strong>Ipsium</strong></span>
        </div>
        <div class="col-6 col-lg-2 my-2">
            <a class="dec-none" role="button">
                <button class="btn btn-orange buttonClick" style="white-space: normal" data-toggle="modal" data-target="#modal">Button</button>
            </a>
        </div>
        </div>                          
    </div>
    </div>
</div>

jQuery

$(".buttonClick").on("click", function(){
    var title = $(this).closest("div span").find(".ws_title").text());          
 });

I have tried multiple combinations using the jQuery documentation but with no luck.

Is it even possible to achieve what I need?

Solution

Aside from the extra ) in the JS causing a syntax error, the issue is due to closest('div span'). You need to give a selector to closest() which is the nearest parent of both elements. As such closest('.row') will work, given the HTML in your example.

Also note that you cannot nest clickable elements in HTML as it's invalid. As such I removed the a which wrapped the button.

$(".buttonClick").on("click", function() {
  var title = $(this).closest(".row").find(".ws_title").text();
  console.log(title);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade" id="dummy" role="tabpanel" aria-labelledby="tab">
    <div class="bg-light px-3 my-2">
      <div class="row align-items-center text-center">
        <div class="col-12 col-lg-4 my-2">
          <span class="h5 ws_title"><strong>Title</strong></span>
        </div>
        <div class="col-6 col-lg-2 my-2">
          <button class="btn btn-orange buttonClick" style="white-space: normal" data-toggle="modal" data-target="#modal">Button</button>
        </div>
      </div>
    </div>
  </div>
</div>

I removed the non-relevant parts of your HTML in the example above to make it shorter.