How to show check box text if it is not next to check box using Jquey : [click to see the image][1]

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>


  [1]: http://i.stack.imgur.com/NMuuZ.png

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