jQuery: Script to append when checkbox is checked half working - why is checkbox not actually checking now? -

goal: (jquery mobile) popup searchable list of people can checked off. when checked displayed in table list (and removed when unchecked, haven't figured part out yet).

i've gotten working show in list when checkbox clicked - seems have broken actual checkbox doesn't display check. why , how fix? feel free suggest better way whole thing.

fiddle: http://jsfiddle.net/2srac/

html:

<a href="#roundaddvol_pop" data-rel="popup" data-position-to="window" data-role="button" data-transition="pop">assign volunteer(s)</a>  <table data-role="table" data-mode="">     <thead>         <tr>             <th>volunteer(s)</th>         </tr>     </thead>     <tbody id="volunteerslist">         <tr>             <td>sample</td>         </tr>     </tbody> </table> <div data-role="popup" id="roundaddvol_pop" data-overlay-theme="a" data-theme="a" style="max-width:500px">     <div data-role="header">          <h1>assign volunteer(s)</h1>      </div>     <div data-role="content" data-theme="a">         <p>search names , add checkmark each you'd assign.</p>         <br>         <fieldset>             <ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="search volunteers..." data-inset="true" data-theme="a">             <li style="padding:0px;">                 <label for="vol1">joe</label>                 <input name="vol1" id="vol1" type="checkbox">             </li>             <li style="padding:0px;">                 <label for="vol2">betty</label>                 <input name="vol2" id="vol2" type="checkbox">             </li>             <li style="padding:0px;">                 <label for="vol3">tom</label>                 <input name="vol3" id="vol3" type="checkbox">             </li>             <li style="padding:0px;">                 <label for="vol4">susie</label>                 <input name="vol4" id="vol4" type="checkbox">             </li>             <li style="padding:0px;">                 <label for="vol5">frank</label>                 <input name="vol5" id="vol5" type="checkbox">             </li>             </ul>         </fieldset> <a href="#" data-role="button" data-inline="true">save</a>  <a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow">cancel</a>      </div> </div> 

js:

$(document).ready(function () {     $('#roundaddvol_pop input:checkbox').change(      function () {         var label = $('label[for="' + this.id + '"]')         if ($(this).is(':checked')) {             $('#volunteerslist').append('<tr><td>' + label.text() + '</td></tr>').listview('refresh');         } else {          }     }); }); 

i'd love figuring out uncheck/remove code , making list checkboxes better, figure separate questions...

working example: http://jsfiddle.net/gajotres/up9bn/

you can't use listview('refresh') on not listview:

$('#volunteerslist').append('<tr><td>' + label.text() + '</td></tr>').listview('refresh'); 

i have removed , works:

$('#volunteerslist').append('<tr><td>' + label.text() + '</td></tr>'); 

find out more in other article: jquery mobile: markup enhancement of dynamically added content.