How to show check box text if it is not next to check box using Jquey

click to see the image

I am tying to achive checked value text should visible like shown in the image.without refresh or any click can anyone help me out.?

This is my php dynamic from :

<div class="products-row">
    <?php $tq=$conn->query("select * from os_tiffen where tiffen_status=1 order by id_tiffen ASC");
        while ($tiffen = $tq->fetch_assoc()) {
        ?>  
        <div class="col-md-3"> 
            <div class="foodmenuform row text-center">
                <input multiple="multiple" type="checkbox" id="<?php echo $tiffen['tiffen_image']; ?>" name="tifeen" hidden>
                <label for="<?php echo $tiffen['tiffen_image'];?>"><img src="img/tiffen/<?php echo $tiffen['tiffen_image']; ?>" class="img img-responsive" /></label>
                <h3 class="FoodName"><?php echo $tiffen['tiffen_name'];?></h3>
            </div>
        </div>
    <?php }  ?>
</div>

This is my sript to show the text:

<script type="text/javascript" language="JavaScript">
    $( document ).ready(function() {
    var FoodMenu = $('input[type=checkbox]:checked').map(function(){
        return $(this).next('.FoodName').text();
    }).get().join("<br>");
    $("#selectedfood").html(FoodMenu);
});
</script>

Out put id: <a id="selectedfood"></a></li>