javascript - Jquery - Append value to Paragraph -

i have 4 groups of data tied click-bind event. i'm trying add value hidden field contained within each group paragraph later in page, when checkbox clicked 1 or more groups of data, value hidden field displays within paragraph area.

i'd when checkbox unclicked, removes value paragraph, i'm trying value display when checkbox clicked.

here's i've tried:

this hidden field within group of data stores value:

<input id="servicename_<?php echo $i;?>" name="servicename_<?php echo $i;?>" type="hidden" value="<?php echo $service->product;?>"></input> 

this click-bind event:

$('input[id^=cknow_]').each(function(){     $(this).bind('click',function(){       if($(this).prop('checked'))         {  var servicename = '#servicename_'+$(this).attr('value').split("_");  servicename += servicename;  $('#lblservicename').append($(servicename)); 

edit add checkbox within each group:

<input type="checkbox" id="cknow_<?php echo $i;?>" name="cknow[<?php echo $i;?>]"> </input> 

and paragraph text:

<p id="lblservicename">service name <input type="hidden" id="servicename" value="0"></input> </p> 

what doing wrong , how can fix it? responses appreciated , i'm open , suggestions. thank you.

try

<p id="lblservicename">service name     <span></span>     <input type="hidden" id="servicename" value="0"></input> </p> 

then

jquery(function ($) {     var $checks = $('.group-data input[name^="cknow["]').change(function () {         var vals = $checks.filter(':checked').map(function () {             return $(this).closest('.group-data').find('input[id^=servicename_]').val()         }).get();         $('#lblservicename span').text(vals.join(', '))     }) }) 

demo: fiddle