CSS styling for checkbox in JQuery Mobile (extra checkbox) - css

Question

Having trouble obtaining the correct css to create a check list in jqm. with the help of Make checkbox larger in Jquery Mobile I was able to get a larger checkbox but the results created new checkbox in undesired location? my label elements seem to be creating extra checkbox where my html doesn't have one. see JSFiddle example.
outer label tag is producing a checkbox and css sizing desired to make box larger is only applied to outer label box (the one that shouldn't even be there).
HTML
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<div data-role="page" data-theme="b" id="acs">
<div data-role="header">
<h2>Key Performance Indicators</h2>
</div>
<div data-role="content">
<ul data-role="listview" data-theme="b">
<li>
<h1>Assess Cardiac Risk Factors</h1>
<label>
<input type="checkbox" name="checkbox-2b" id="checkbox-2b" data-theme="b"/>
<label for="checkbox-2b">
<label>
<h3>Age</h3>
</label>
</label>
</label>
<label>
<input type="checkbox" name="checkbox-2b" id="checkbox-2b" data-theme="b"/>
<label for="checkbox-2b">
<label>
<h3>Diabetes</h3>
</label>
</label>
</label>
</li>
</ul>
</div>
<div data-role="footer">
<div data-role="navbar">
</div>
</div>
<div>
<h4>My Footer</h4>
</div>
</div>
CSS
#checkbox-2b {
-ms-transform: scale(6); /* IE */
-moz-transform: scale(6); /* FF */
-webkit-transform: scale(6); /* Safari and Chrome */
-o-transform: scale(6); /* Opera */
padding: 10px;
}

Answer 1

I have updated your fiddle -> http://jsfiddle.net/xxdrf87q/7/
Looking to the documentation the right way for doing a checkbox with it's label is this:
<label>
<input type="checkbox" name="checkbox-0 ">Check me
</label>
So I changed this part:
<label>
<input type="checkbox" name="checkbox-2b" id="checkbox-2b" data-theme="b"/> Age
</label>
<label>
<input type="checkbox" name="checkbox-2b" id="checkbox-2b" data-theme="b"/> Diabetes
</label>

Answer 2

Thanks to jcarrera for the fix, to clarify my final issue here was the resolution to the multiple check boxes unsolicited: The css needed to add z-index: 2; to apply to top layer checkbox and remove id from the label elements. Cleaned up extra code by removing extra label tags not needed.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<div data-role="page" data-theme="b" id="acs">
<div data-role="header">
<h2>Key Performance Indicators</h2>
</div>
<div data-role="content">
<ul data-role="listview" data-split-icon="gear" data-theme="c">
<h1>Assess Cardiac Risk Factors</h1>
<label>
<input type="checkbox" name="checkbox-2b" id="checkbox-2b" data-theme="c"/>
<h3>Age</h3>
</label>
<label>
<input type="checkbox" name="checkbox-2b" id="checkbox-2b" data-theme="c"/>
<h3>Diabetes</h3>
</label>
</ul>
</div>
<div data-role="footer">
<div data-role="navbar">
</div>
<h4>John Doe</h4>
</div>
</div>