How to split the elements to in separate div using jQuery

Question

I am trying to split the checkboxes with its label and wrap in a div tag.
like this but I can't able get this.
I tried HERE

My html is:

<div class="modal-body">                 
            <p><input type="checkbox" name="anyBusinessSector" value="true" id="anyBusinessSector">
<input type="hidden" id="__checkbox_anyBusinessSector" name="__checkbox_anyBusinessSector" value="true"> Any</p>
 <p>
    <input type="checkbox" name="categoryIds" value="1" id="categoryIds-1">
<label for="categoryIds-1" class="checkboxLabel">Animal husbandry</label>
<br>
<input type="checkbox" name="categoryIds" value="2" id="categoryIds-2">
<label for="categoryIds-2" class="checkboxLabel">Apparels</label>
<br>
<input type="checkbox" name="categoryIds" value="3" id="categoryIds-3">
<label for="categoryIds-3" class="checkboxLabel">Business Services - I</label>
<br>
<input type="checkbox" name="categoryIds" value="4" id="categoryIds-4">
<label for="categoryIds-4" class="checkboxLabel">Agro Based Businesses</label>
<br>
<input type="checkbox" name="categoryIds" value="5" id="categoryIds-5">
<label for="categoryIds-5" class="checkboxLabel">Business Services - II</label>
<br>
<input type="checkbox" name="categoryIds" value="6" id="categoryIds-6">
<label for="categoryIds-6" class="checkboxLabel">Construction Related Activities</label>
<br>
<input type="checkbox" name="categoryIds" value="7" id="categoryIds-7">
<label for="categoryIds-7" class="checkboxLabel">Dairy Farming</label>
<br>
<input type="checkbox" name="categoryIds" value="8" id="categoryIds-8">
<label for="categoryIds-8" class="checkboxLabel">Eateries</label>
<br>
<input type="checkbox" name="categoryIds" value="9" id="categoryIds-9">
<label for="categoryIds-9" class="checkboxLabel">Farming/ Agriculture</label>
<br>
<input type="checkbox" name="categoryIds" value="10" id="categoryIds-10">
<label for="categoryIds-10" class="checkboxLabel">Flower Business</label>
<br>
<input type="checkbox" name="categoryIds" value="11" id="categoryIds-11">
<label for="categoryIds-11" class="checkboxLabel">Handicrafts</label>
<br>
<input type="checkbox" name="categoryIds" value="12" id="categoryIds-12">
<label for="categoryIds-12" class="checkboxLabel">Home Improvement</label>
<br>
<input type="checkbox" name="categoryIds" value="13" id="categoryIds-13">
<label for="categoryIds-13" class="checkboxLabel">Meat Businesses</label>
<br>
<input type="checkbox" name="categoryIds" value="14" id="categoryIds-14">
<label for="categoryIds-14" class="checkboxLabel">Miscellaneous</label>
<br>
<input type="checkbox" name="categoryIds" value="15" id="categoryIds-15">
<label for="categoryIds-15" class="checkboxLabel">Repair Services</label>
<br>
<input type="checkbox" name="categoryIds" value="17" id="categoryIds-16">
<label for="categoryIds-16" class="checkboxLabel">Transportation Services</label>
<br>
<input type="checkbox" name="categoryIds" value="16" id="categoryIds-17">
<label for="categoryIds-17" class="checkboxLabel">Tobacco Related Activities</label>
<br>
<input type="checkbox" name="categoryIds" value="19" id="categoryIds-18">
<label for="categoryIds-18" class="checkboxLabel">Education Loan</label>
<br>
<input type="checkbox" name="categoryIds" value="18" id="categoryIds-19">
<label for="categoryIds-19" class="checkboxLabel">Others</label>
<br>
</p>
</div>

Here is my script

$('.modal-body input[type="checkbox"]:nth-child(8n+8)').each(function(){
    $(this).prevAll('input[type="checkbox"]').addBack().wrapAll('<div/>'); 
});

Answer 1

I would suggest using .slice() method and an old for loop, the following code adds the very .next() sibling label elements to to sliced collection and then .wrapAll() the matching elements:

// Caching chekboxes and excluding the first one
var $elems = $('.modal-body input[type="checkbox"]').not(':first'), $set;

for ( i = 0; i < $elems.length; i+=7 ) {
   $set = $elems.slice(i, i+7);
   // Adding next label elements to the set
   $set.add($set.next('label')).wrapAll('<div/>');
}

http://jsfiddle.net/5mLN9/

In case that you want to add both label and br tags to the collection:

$set.add($set.nextUntil('input')).wrapAll('<div/>');

http://jsfiddle.net/GxtLS/

Answer 2

How about something like:

$('.modal-body input[type="checkbox"]').each(function () {
    newWrapped = $("<div>");

    newWrapped.append( $(this).clone() );
    newWrapped.append( $(this).next().clone() );

    $(this).next().remove();
    $(this).remove();

    $('.modal-body').append(newWrapped);
});

$('.modal-body br').remove();

JSFiddle: http://jsfiddle.net/uUCZF/