javascript - jQuery Mobile elements not displaying properly -

i using jquery mobile display table. when append new row using addmore button, display off! why so? suppose follow first row. ans also, displayed in black theme on browser... suppose white in fiddle. why?

here fiddle: http://jsfiddle.net/bgxkw/1/

this code add new row

var addmore = '<tr><td style="text-align: center">' + currentindex + '</td>' +     '<td class="small">' +     '<div data-role="fieldcontain" class="ui-hide-label">' +     '<label for="number_' + currentindex + '">response number</label>' +     '<input type="text" name="number_' + currentindex + '" id="number_' + currentindex + '" value="" placeholder="response number"/>' +     '</div></td><td>' +       '<div data-role="fieldcontain" class="ui-hide-label">' +     '<label for="label_' + currentindex + '">description</label>' +     '<input type="text" name="label_' + currentindex + '" id="label_' + currentindex + '" value="" placeholder="description "/>' +     '</div></td></tr>'; 

also, how can remove row?

you want $(".config").trigger("create"); @ final resolve style problem.

updated fiddle link http://jsfiddle.net/bgxkw/7/

$("#addmore").click(function () {     currentindex = $(".config tr:last td:first").text()     if(currentindex == ""){currentindex = 0}     currentindex = parseint(currentindex) + 1     var addmore = '<tr><td style="text-align: center">' + currentindex + '</td>' +         '<td class="small">' +         '<div data-role="fieldcontain" class="ui-hide-label">' +         '<label for="number_' + currentindex + '">response number</label>' +         '<input type="text" name="number_' + currentindex + '" id="number_' + currentindex + '" value="" placeholder="response number"/>' +         '</div></td><td>' +           '<div data-role="fieldcontain" class="ui-hide-label">' +         '<label for="label_' + currentindex + '">description</label>' +         '<input type="text" name="label_' + currentindex + '" id="label_' + currentindex + '" value="" placeholder="description "/>' +         '</div></td></tr>';       ++currentindex;     $('#labels .config tr:last').after(addmore);     $(".config").trigger("create"); });  $("#remove").click(function(){     $(".config tr:last").remove(); }); 

note: fixed style problem , remove function.