Javascript Jquery-将值附加到段落

我有4组数据绑定到单击绑定事件。我试图将每个组中包含的隐藏字段中的值添加到页面后面的段落中，这样当从一组或多组数据中单击复选框时，隐藏字段中的值将显示在段落区域中

我还想得到它，这样当复选框被取消勾选时，它会从段落中删除该值，但现在我只是尝试在单击复选框时显示该值

以下是我尝试过的：

这是存储值的数据组中的隐藏字段：

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

编辑以添加每个组中的复选框：

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

试试看

演示：
是否有多个复选框和段落？如果是这样，当选中复选框时，您如何知道必须编辑哪个段落这里有多个复选框和一个段落。您是否能够共享完整生成的html？如果可能，创建一个提琴-如果选中多个复选框，那么应该怎么办？我更新了标题。
<input type="checkbox" id="ckNow_<?php echo $i;?>" name="ckNow[<?php echo $i;?>]">
</input>

<p id="lblServiceName">Service Name
<input type="hidden" id="servicename" value="0"></input>
</p>

<p id="lblServiceName">Service Name
    <span></span>
    <input type="hidden" id="servicename" value="0"></input>
</p>

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(', '))
    })
})