Ajax json value in multiple div with same id

Question

I have a ajax request that getting json value from php page like

{"Inboxunreadmessage":4}

And here is my ajax JS

$(window).load(function(){
    $.ajax({
        dataType: "json",
        type: "POST",
        url: "/mail/mail-action",
        data: {
            _act: "load"
        }
    }).done(function(data) {
        if(data.message){
            showMessage(data);
        }
        $('#Inboxunreadmessage').html(data.Inboxunreadmessage);
    }).error(function(jqxhr, exception){
        ajaxErrorHandler(jqxhr, exception);
    });
});

Its working properly but when i use div id like

<span id="Inboxunreadmessage"></span>
<span id="Inboxunreadmessage"></span>
<span id="Inboxunreadmessage"></span>

Its showing value only in one div (in First Div)

Answer 1

Having 2 elements with the same ID is not valid html according to the W3C specification.

So id only work once at first position on page

if you want append value in all div then change id to class

<span class="Inboxunreadmessage"></span>
<span class="Inboxunreadmessage"></span>
<span class="Inboxunreadmessage"></span>


$(window).load(function(){
    $.ajax({
        dataType: "json",
        type: "POST",
        url: "/mail/mail-action",
        data: {
            _act: "load"
        }
    }).done(function(data) {
        if(data.message){
            showMessage(data);
        }
        $('.Inboxunreadmessage').html(data.Inboxunreadmessage);
    }).error(function(jqxhr, exception){
        ajaxErrorHandler(jqxhr, exception);
    });
});