I have the following HTML mark up.

<ul class="thumbs">
    <li>
      <strong>Should be level 0</strong>
    </li>
        <li>
          <strong>Should be level 1</strong>
    </li>
        <li>
      <strong>Should be level 2</strong>
    </li>
    </ul>

    <ul class="thumbs">
    <li>
      <strong>Should be level 0 --  </strong>
    </li>
    <li>
      <strong>Should be level 1 --  </strong>
    </li>
    </ul>

and javascript.

var i = 0;
  var j = 0;
  jQuery('ul.thumbs').each(function(){
    var newName = 'ul -level' + i;
    jQuery(this).addClass('ul-level-'+i)
      .before('<h2>'+newName+'</h2>');
    i = i+1;
  });

  jQuery('ul.thumbs li').each(function(){
    jQuery(this).addClass('li-level-'+j)
      .append('li-level-'+j);
    j = j+1;
  });

JS Bin Link

But the level of the second UL LI is show diffrent.

Please help me out in this.