Come prevenire la funzione click di attivazione da tutti i post nella pagina di WordPress? - javascript, jquery, wordpress

Sto usando il seguente jQuery per mostrare l'opzione di condivisione sociale. Ma il problema è quando faccio clic su .fa-share-alt per singolo post, quindi viene attivato per tutti i post.

(function($) {
"use strict";
function initsocialShare(){
$(".fa-share-alt").click(function(){
$(".fa-share-alt").hide();
$(".fa-times").show();
$(".share").show();
});
$(".fa-times").click(function(){
$(".fa-share-alt").show();
$(".fa-times").hide();
$(".share").hide();
});
}


$(document).ready(function() {

initsocialShare();

});

})(jQuery);// End main function

CODICE HTML:

<div class="share">
<div class="widget-share">
<!-- share-wrapper start -->
<div class="share-wrapper">
<!-- social start -->
<div class="social">
<i class="fa fa-facebook social-btn facebook" aria-hidden="true"></i>
<i class="fa fa-facebook social-btn facebook" aria-hidden="true"></i>
<i class="fa fa-facebook social-btn facebook" aria-hidden="true"></i>
<i class="fa fa-facebook social-btn facebook" aria-hidden="true"></i>
<i class="fa fa-facebook social-btn facebook" aria-hidden="true"></i>
<i class="fa fa-facebook social-btn facebook" aria-hidden="true"></i>
</div>
<!-- social end -->
</div>
<!-- share-wrapper end -->
</div>
</div>
<i id="<?php the_ID(); ?>" class="fa fa-share-alt" aria-hidden="true"></i>
<i id="<?php the_ID(); ?>" class="fa fa-times" aria-hidden="true"></i>

Prima del clic:

Dopo il clic:

risposte:

Perché tu usi $(".share"), quindi prenderà di mira tutti gli elementi che hanno classeCondividere. La funzione clic in jQuery ha la destinazione parametro come eventObject, in cui è possibile ottenere la destinazione con un solo clic. Dopo aver ottenuto il bersaglio, ottieni l'elemento fratello del bersaglio da mostrare e nascondere, dipende da ciò di cui hai bisogno.

https://api.jquery.com/click/

https://api.jquery.com/siblings/

(function($) {
"use strict";
function initsocialShare(){
$(".fa-share-alt").click(function(event){
var target = $(event.target)
target.hide();
target.siblings(".fa-times").show();
target.siblings(".share").show();
});
$(".fa-times").click(function(event){
var target = $(event.target);
target.hide();
target.siblings(".fa-times").hide();
target.siblings(".fa-share-alt").show();
target.siblings(".share").hide();
});
}


$(document).ready(function() {

initsocialShare();

});

})(jQuery);

Ho capito cambiando i codici HTML e jQuery come segue:
HTML

<div class="social-share-container">
<i id="<?php the_ID(); ?>" class="fa fa-share-alt" aria-hidden="true"></i>
<i id="<?php the_ID(); ?>" class="fa fa-times" aria-hidden="true"></i>
<span class="latest-news--comments" style="float: right;">
<i class="fa fa-comment" aria-hidden="true"></i>
<?php printf( _nx( "", "%1$s", "comments title", get_comments_number(), "goalkick" ), number_format_i18n( get_comments_number() ) ); ?>
</span>
<div class="share">
<div class="widget-share">
<!-- share-wrapper start -->
<div class="share-wrapper">
<!-- social start -->
<div class="social">
<i class="fa fa-facebook social-btn facebook" aria-hidden="true"></i>
<i class="fa fa-facebook social-btn facebook" aria-hidden="true"></i>
<i class="fa fa-facebook social-btn facebook" aria-hidden="true"></i>
<i class="fa fa-facebook social-btn facebook" aria-hidden="true"></i>
<i class="fa fa-facebook social-btn facebook" aria-hidden="true"></i>
<i class="fa fa-facebook social-btn facebook" aria-hidden="true"></i>
</div><!-- social end -->
</div><!-- share-wrapper end -->
</div>
</div>
</div><!-- social-share-container end -->

jQuery:

function initsocialShare(){
$(".social-share-container .fa-share-alt").click(function(){
$(this).hide();
$(this).siblings(".fa-times").show();
$(this).siblings(".share").show();
});
$(".social-share-container .fa-times").click(function(){
$(this).hide();
$(this).siblings(".fa-share-alt").show();
$(this).siblings(".share").hide();
});
}