Apply changes across the page. Jquery -

i have these lines of jquery code manipulate html

$('#remarks li:gt(1)').wrapall('<ul class="btmrow" />'); $("#btrowmargin").appendto("#remarks"); $('#remarks ul:lt(2)').wrapall('<li class="btmrow" />'); 

i want above code take effect across page ever #remarks present. wrote

$.each($("#remarks"), function() {     $('#remarks li:gt(1)').wrapall('<ul class="btmrow" />');     $("#btrowmargin").appendto("#remarks ");     $('#remarks ul:lt(2)').wrapall('<li class="btmrow" />'); }); 

but doesn't seem working.

jsfiddle here

originally html looks

<li>     <ul id="remarks" class="remarks">        <li class="header  soldbkg">showing information</li>        <li><p><b>remarks:</b></p></li>        <li><span>occupant name</span><span class="data">listing office</span></li>        <li><span>occupancy/show</span><span class="data">listing agent</span></li>        <li><span>occupant type</span><span class="data">n/a</span></li>        <li><span>occupant phone</span><span class="data">n/a</span></li>        <li><span>other phone number</span><span class="data">n/a</span></li>      </ul>     <ul class="btmrow marginfix" id="btmrowmarginfix">         <li></li>         <li><span>phone show</span><span class="data">n/a</span></li>         <li><span>lockbox location</span><span class="data">n/a</span></li>         <li><span>lockbox type</span><span class="data">n/a</span></li>         <li><span>showing access</span><span class="data">n/a</span></li>     </ul>   </li> 

after applying jquery html looks :

<li>     <ul id="remarks" class="remarks">        <li class="header  soldbkg">showing information</li>        <li><p><b>remarks:</b></p></li>        <li class="btmrow">          <ul class="btmrow">             <li><span>occupant name</span><span class="data">listing office</span></li>             <li><span>occupancy/show</span><span class="data">listing agent</span></li>             <li><span>occupant type</span><span class="data">n/a</span></li>             <li><span>occupant phone</span><span class="data">n/a</span></li>             <li><span>other phone number</span><span class="data">n/a</span></li>          </ul>        </li>     </ul>     <ul class="btmrow marginfix" id="btmrowmarginfix">         <li></li>         <li><span>phone show</span><span class="data">n/a</span></li>         <li><span>lockbox location</span><span class="data">n/a</span></li>         <li><span>lockbox type</span><span class="data">n/a</span></li>         <li><span>showing access</span><span class="data">n/a</span></li>     </ul>   </li> 

but want :

<li>     <ul id="remarks" class="remarks">        <li class="header  soldbkg">showing information</li>        <li><p><b>remarks:</b></p></li>        <li class="btmrow">          <ul class="btmrow">             <li><span>occupant name</span><span class="data">listing office</span></li>             <li><span>occupancy/show</span><span class="data">listing agent</span></li>             <li><span>occupant type</span><span class="data">n/a</span></li>             <li><span>occupant phone</span><span class="data">n/a</span></li>             <li><span>other phone number</span><span class="data">n/a</span></li>          </ul>           <ul class="btmrow marginfix" id="btmrowmarginfix">             <li></li>             <li><span>phone show</span><span class="data">n/a</span></li>             <li><span>lockbox location</span><span class="data">n/a</span></li>             <li><span>lockbox type</span><span class="data">n/a</span></li>             <li><span>showing access</span><span class="data">n/a</span></li>         </ul>        </li>     </ul>    </li> 

ok, here liste of misstake.

1: id's must unique, when have jquery selector $('#remarks'), return 1 element. no loop in each. changing id class make loop.

side note: when looping through jquery element, can use .each() : $(selector).each(function(){}). way using arrays or objects.

2: inside .each(), need use this, else reselecting every element , have no "real controle" :

$('.remarks').each(function(){      var $this = $(this) //caching object optimisation      $this.find('li:gt(1)').wrapall('<ul class="btmrow" />');      //this line has change, see point 3      $this.find('ul:lt(2)').wrapall('<li class="btmrow" />'); }) 

3: guess, line :

$("#btrowmargin").appendto('#remarks'); 

will have change. you'll probly need use dom traversal function can't tell since don't have access dom. finish .appendto($this).

$this.siblings('.bottomrow.marginfix').appendto($this.find('li :eq(2)'));