Query: How do you traverse to a previous div and to its children when $(this) is in another div?

Thats my code I tried so Far:

so when I clicked on the a-link (which has a class '.like'), I want the ( '.PostlikeCount' [found in the div.postInfo]) to display the new total like amount.

$(".like").click(function(e) {
  e.preventDefault()
  $.ajax({
    method: "GET",
    url: $(this).attr("href"),
    success: function(response) {
      console.log(response)

      $(this).parents("div.row").prevAll().first().find("span.PostlikeCount").html(response.total_likes)
    }
  });
});

<div class="row postInfo">
  <small class="font-weight-light col-8 ">
     <span class="PostlikeCount">{{post.likePost.count}}</span> people like this 
  </small>
  <small class="font-weight-light ml-3 viewAll"><a href= "#">view all comment</a>
  </small>
</div>

<hr>

<div class="mt-2 row">
  <span class="col-9 postLike">
    <a href="{%url 'likes:like_Post' post_id=post.id location='homePage'%}" class="d-inline-block like">
      <span><i class="far fa-heart "></i> Like</span>
    </a>
  </span>

</div>

Solution

Assumptions:

you have multiple .postInfo and .mt-2 pairs and not just the one pair in the question.
you can't wrap the postInfo/mt-2 in another class (this would make this much easier)

You need to get the closest .row to the link clicked, then use .prevAll(".postInfo") to find the related postInfo then find below that to get the PostLikeCount.

The differences between your code and this is

.prevAll(".postInfo")

will give all the previous ".postInfo" nodes rather than all previous nodes. When using .prevAll they are in reverse order, so .first() will correctly find the one just above in the HTML.

Second difference is .closest(".row") will find first parent that is a .row. It's quite possible your code is not working because you have nested .row divs (not shown in the question), but you only want the one at the same level as .postInfo

I removed the unrelated ajax calls to provide a working snippet.

$(".like").click(function(e) {
  e.preventDefault()
  $(this)
    .closest("div.row")
    .prevAll(".postInfo")
    .first()
    .find("span.PostlikeCount").html($(this).data("result"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row postInfo">
  <small class="font-weight-light col-8 ">
     <span class="PostlikeCount"><em>result here</em></span> people like this 
  </small>
  <small class="font-weight-light ml-3 viewAll"><a href= "#">view all comment</a>
  </small>
</div>

<hr>

<div class="mt-2 row">
  <span class="col-9 postLike">
    <a href="#" class="d-inline-block like" data-result='11'>
      <span><i class="far fa-heart "></i> Like</span>
    </a>
  </span>

</div>

<div class="row postInfo">
  <small class="font-weight-light col-8 ">
     <span class="PostlikeCount"><em>result here</em></span> people like this 
  </small>
  <small class="font-weight-light ml-3 viewAll"><a href= "#">view all comment</a>
  </small>
</div>

<hr>

<div class="mt-2 row">
  <span class="col-9 postLike">
    <a href="#" class="d-inline-block like" data-result='22'>
      <span><i class="far fa-heart "></i> Like</span>
    </a>
  </span>

</div>