Question

E.g:

with only one container div :

<div id="container1">
  <ul>
    <li>I am not part of update </>
    <li> ID fo container 1</li>
  </ul>
</div>

and when I adding new one div dynamic, I want them to be:

<div id="container1">
  <ul>
    <li>I am not part of update </>
    <li> ID of container 1</li>
    <li> ID of container 2 was added here </li>
  </ul>
</div>

<!-- container 2 should has both ID of container 1 and 2 -->
<div id="container2">
  <ul>
    <li>I am not part of update </>
    <li> ID of container 1</li>
    <li> ID of container 2 was added here </li>
  </ul>
</div>

It means when I create new container, the new created container ID should be adding to the previous containers.

And another problem is how to update the ID list of container when I remove container.E.g:

when I remove container1 , the ID list container should be updated to :

<div id="container2">
  <ul>
    <li>I am not part of update </>
    <!-- ID of container 1 had been remove -->
    <li> ID of container 2 was added here </li>
  </ul>
</div>

Thank you very much!!

Answer 1

HTML structure you want is something like this:

  <div id="container-list">
    <div id="container1" class="container">
      <ul>
        <li>I am not part of update </>
        <li class="container1"> ID fo container 1</li>
        <li class="container2"> ID fo container 2</li>
      </ul>
    </div>
    ...
  </div>

Adding a new container:

var containerId = ... // your next id
$('container-list').append(/* your new container html code */)

// now appending a <li> to each of containers
$('<li>').addClass(containerId).text(containerId).appendTo('div.container ul')

Removing a container:

var containerId = ... // container to remove
$('#' + containerId).remove() // remove this container
$('li.' + containerId).remove() // and remove any mention about it