JSON from jquery .each() function

Create json object or array from dynamically generated content

[nugg79]

I am currently using jQuery UI accordion to display kids names on an enrollment form. These are dynamically created earlier on the page before the submit action. On submit of the page, I want to pull each child with their corresponding information into a format like JSON or XML to pass to the server. I know I have to create a $("element").each() but am unsure how to loop through to get each group of information. The generated html surrounding the kids info is as follows:

<!--kids name-->
<h3 class="kid_name_final ui-accordion-header ui-helper-reset ui-state-default ui-accordion-header-active ui-state-active ui-corner-top ui-accordion-icons" role="tab" id="ui-accordion-kid-header-0" aria-controls="ui-accordion-kid-panel-0" aria-selected="true" tabindex="0">
 <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>
 <span class="kid_first">sandy</span> 
 <span class="kid_middle"></span> 
 <span class="kid_last">jones</span> 
 <span class="kid_suffix"></span>
</h3>
<!--kids information-->
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="display: block; height: 70px;" id="ui-accordion-kid-panel-0" aria-labelledby="ui-accordion-kid-header-0" role="tabpanel" aria-expanded="true" aria-hidden="false">
 <ul>
 <li class="kid_DOB_final">01/10/2003</li>
 <li class="kid_SSN_final">444-44-4444</li>
 <li class="kid_final_edit"><a href="javascript:void(0);" class="editChild_form">edit</a> / <a href="javascript:void(0);" class="remove_child">remove</a></li>
 </ul>
</div>

<!--the next kid would begin here with the same code-->

Here is the the pattern I believe I should be receiving to get the data:

{
 "child":
 {
"name":
[
 "first": "Bill",
 "middle": "M",
 "last": "Smith",
 "suffix": ""
 ]
 "DOB": "12/1/1995",
 "ssn": "222-22-2222"
 },
 "child":
 {
"name":
[
 "first": "Mary",
 "middle": "A",
 "last": "Smith",
 "suffix": ""
 ]
 "DOB": "1/12/1999",
 "ssn": "333-33-3333"
 },
 "child":
 {
"name":
[
 "first": "Jeremy",
 "middle": "Q",
 "last": "Smith",
 "suffix": "Jr"
 ]
 "DOB": "07/9/2003",
 "ssn": "555-55-5555"
 }
 
 }

Any ideas to get my on my way? Thanks in advance.

[daveVk]

These are dynamically created earlier on the page

Then I assume data on each kid is already held in JSON array or other data structure ?

So is kids 3 and 7 are selected, get data from 3,7 in that array/structure ?