How would I give each appended li elements a unique I'd?

[Abel1416]

Good day!! My issue is this...

I sent an ajax request to get some details at the backend. After splitting the response i have 2 different arrays set to a variable. 

I.e **allQst** [1,2,3,4,5,6] and **attempted** [1,2,3,4].

I now looped allQst with foreach and created an li element to list each at the frontend which works fine. The issue now is trying to add a different id for each li that would be listed. 

I tried to add .attr() to the li as in,

    <li>bla bla...</li>.html(item).attr("id","listing"+item);

This gives it the same id. I.e listing1 for all li

I also tried to make it

    <li>bla bla...</li>.html(item).attr('id', function(i) { return 'listing'+(i+1); });

Doesn't work.

This is my code in full...   

$(document).ready(function() {
    $("#next,#prev").one('click', function() {
        $.ajax({
            url: 'done.php',
            method: 'post',
            dataType: "JSON",
            success: function(response) {
                var rsp = response.r2;
                var rspB = response.r1;
                var allQst = rsp.split(",");
                var attempted = rspB.split(",");
                attempted.forEach(func2);
                allQst.forEach(func);

                function func(item, index) {
                    var ul = $("#list");
                    var li = $('<li  class="pagination-link"></li>').html(item).attr('id', function(i) {
                        return 'listing' + (i + 1);
                    });
                    ul.append(li);
                }

                function func2(item, index) {
                    $("#" + item).addClass("is-current");
                }
            } //succes func end
        }); //ajax end
    }); //click func end
            }); //doc end
   

What I want to achieve lastly is to get the id and add a class to each of them.

I would be glad if you can assist me!! Thanks in advance.

[Barand]

If you have
 

allQst = [1,2,3,4,5,6]

attempted = [5,6]

then the indexes of 5 and 6 are different in those two arrays so I used the items as the id values

                function func(item, index) {
                    var li = $('<li  class="pagination-link"></li>').html(item).attr('id', item);
                    ul.append(li);
                }

                function func2(item, index) {
                    $("#"+item).addClass("is-current");
                }

 

[Abel1416]

If I do 

 var test=$("li").attr("id"); 

alert(test);

Inside the func loop, it  is displaying same id for each iteration. I.e 1

 

 

[Barand]

Using attempted = [5,6] with the code I posted, I get...

    <ul id="list">
        <li class="pagination-link" id="1">1</li>
        <li class="pagination-link" id="2">2</li>
        <li class="pagination-link" id="3">3</li>
        <li class="pagination-link" id="4">4</li>
        <li class="pagination-link is-current" id="5">5</li>
        <li class="pagination-link is-current" id="6">6</li>
    </ul>

 

[Abel1416]

@Barand

I commented out my code and replaced it with urs still the same. It's been listed but the class is not added. When I tried to get the value of the id of the li's in function func2{....}, it shows undefined whereas it's being displayed at function func{}.

Like the id of the listed items is not accessible when adding the class. 

 

[requinix]

This

var li = $('<li  class="pagination-link"></li>').html(item).attr('id', function(i) {
	return 'listing' + (i + 1);
});

won't work because the li is only one element (at a time) so they all have i=0.

Barand's code has a typo and should be

var li = $('<li  class="pagination-link"></li>').html(item).attr('id', index);

which correctly does what the first code was attempting to do.

[Abel1416]

Thanks to you all!! I would have saved myself from posting this question if I took a second to check my responses from the backend.

 

I did

$attempted = implode(" ,",$arr);

Which made the response had a space [1 ,2 ,3 ,4]; 

 

thanks once again