Ошибка в отображении данных с братьями и сестрами с помощью jquery

Question

Ищите решение для запуска $ajax запроса и добавления данных ответа в HTML, когда время начальной загрузки экрана, используя событие onload, используя jquery

Здесь с моим кодом, PFB

   $(document).ready(function(){
   $(function(){
       $(".clickcounter").each(function(){  
           $(this).parent().addClass('active_parent');         
	   var clicked_link = $(this).attr('href');
	   $.ajax({
	       type: "POST",
	       url: 'URL',
	       data : { 'clicked_link' : clicked_link },
	       cache: false,
	       success: function(data) {
	           $('.active_parent .count_span').text(clicked_link+' '+data);
                   $('.active_parent').removeClass('active_parent');
	       }
	   })
        });
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="size-button-show-code">
	<a class="button-show-code-orng offer-button js-triggers-outclick clickcounter active" href="https://123.com" target="_blank" rel="nofollow noopener noreferrer"> Visit HomePage</a>
	<span class="count_span">1st clicks<br></span>
</div>
<div class="size-button-show-code">
	<a class="button-show-code-orng offer-button js-triggers-outclick clickcounter active" href="https://123.com" target="_blank" rel="nofollow noopener noreferrer"> Visit HomePage</a>
	<span class="count_span">2nd clicks<br></span>
</div>
<div class="size-button-show-code">
	<a class="button-show-code-orng offer-button js-triggers-outclick clickcounter active" href="https://123.com" target="_blank" rel="nofollow noopener noreferrer"> Visit HomePage</a>
	<span class="count_span">3rd clicks<br></span>
</div>
<div class="size-button-show-code">
	<a class="button-show-code-orng offer-button js-triggers-outclick clickcounter active" href="https://123.com" target="_blank" rel="nofollow noopener noreferrer"> Visit HomePage</a>
	<span class="count_span">4th clicks<br></span>
</div>

но этот код не может найти его ближайший .count_span и не может добавить в него значение данных

может кто-нибудь помочь мне с этим

Answer 1

Попробуйте что-то вроде:

 $(function(){
  $(".clickcounter").each(function(){
    var $self = $(this);
    $self.parent().addClass('active_parent');         
    var clicked_link = $self.attr('href');
    $.ajax({
      type: "POST",
      url: 'URL',
      data : { 'clicked_link' : clicked_link },
      cache: false,
      success: function(data) {
        $('.count_span', $self).text(clicked_link+' '+data); // this is where you need $self
        $('.active_parent').removeClass('active_parent');
        //$self.removeClass('active_parent'); is maybe better then they line above -> depends if you really want to remove that class on all element or only the current one
      }
    })
  });
});

Вам нужна собственная ссылка внутри обратного вызова, чтобы получить правильный элемент count_span