jQuery works on 1st element in a php loop

Question

I want to change an icon with a loading icon when clicked on a link. This is happening in a foreach loop in php/html code.

jQuery works fine, but only in the 1st result. In other results it does not work.

HTML:

<p id= "like">
    <a  href="..Link" id="like" class="external"><i class="icon-thumbs-up"></i></a>
</p>

jQuery:

$("#like").click(function() {
    $("#like").toggle('1000');
    $("i", this).toggleClass("icon-loading3");
                });

All I want to do is change the class from icon-thumbs-up to icon-loading3 and remove the link!

Thanks for the help ;)

use class instead of id and instead of simple click use $(document).on("click","selector",function(){}) as mentionted in my answer — Sagar Arora, Apr 17 '17 at 10:28

score 0 · Answer 1 · edited May 23 '17 at 12:02

0

Look at ids and classes in HTML, rename id="like" to class="like-main " or something familiar.

Behaviour is right as DOM only stores first value with a given ID.

edited May 23 '17 at 12:02

Community

1
1

answered Apr 17 '17 at 09:44

Marcin

1,488
1
13
27

score 0 · Answer 2 · answered Apr 17 '17 at 09:49

change id to class like the following

html:

<p class= "like">
    <a  href="..Link" class="like" class="external"><i class="icon-thumbs-up"></i></a>
</p>

jquery:

$(".like").click(function() {
    $(".like").toggle('1000');
    $("i", this).toggleClass("icon-loading3");
                });

score 0 · Accepted Answer · answered Apr 17 '17 at 09:51

0

this should work fine:

$(".external").click(function(){
  $(this).find("i").addClass("icon-loading3").removeClass('icon-thumbs-up');
  $(this).parent().html($(this).html());
})

answered Apr 17 '17 at 09:51

diavolic

722
1
4
5

All of the answers are amazing, but yours works the best for me! – Vani Kalapciev Apr 17 '17 at 11:02

score 0 · Answer 4 · answered Apr 17 '17 at 10:25

if you are using it in forach loop then use class not id. On the one page there should be unique id for each element.

So please do it like:

<p class="like">
    <a  href="..Link" class="anchor_like" class="external"><i class="icon-thumbs-up"></i></a>
</p>

$(document).on('click','.like',function() {
    $(this).toggle('1000');
    $(this).find('i').toggleClass("icon-loading3");
 });

score 0 · Answer 5 · answered Apr 17 '17 at 11:03

0

All of your answers are amazing. diavolic's answer worked best for me! ;)

answered Apr 17 '17 at 11:03

Vani Kalapciev

82
11

jQuery works on 1st element in a php loop

5 Answers5