jQuery html () does not update the content in the corresponding ID more than once in the same HTML


I'm using a PHP view page in which I have some contents which should be displayed in some number of pop ups. Contents are getting from database using jQuery according to values of certain drop downs. It all works fine, assuming I have contents in:

items ='blah blah';

and I'm updating this contents in span with id activity_load as:


I have placed this span inside the contents of popup, I should have to use separate popups with the same contents so i have looped this popup, somewhat like this:

for($i=0;$i<10;$i++) {
<div class="modal fade" id="long-modal $i" tabindex="-1" role="dialog" aria-labelledby="long-modal-label" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" data-border-top="multi">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title" id="long-modal-label">Activities</h4>
                <div class="modal-body">

            <span id="activity_load"></span>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" id="close-pop" data-dismiss="modal" rel="<?php echo $i;?>">Close</button>

    </div> }

By using jQuery html() I'm getting the contents only on the first popup, I thought it may because of any issues of popup but I have tried inside the HTML like adding:

<span id="activity_load"></span>
<span id="activity_load"></span>
<span id="activity_load"></span>

The contents are not showing, rather than <span id="activity_load"></span> use just once its working.

ID's are unique

Each element can have only one ID

Each page can have only one element with that ID

Classes are NOT unique

You can use the same class on multiple elements.

You can use multiple classes on the same element.

In short You can not use same id for another tag. Id is identity of certain tag and class u can use for multiple tag. for eg. for designing that tags with css

<span id="span1identity" class ="myspan"></span>
<span id="span2identity" class ="myspan"></span>