How do I get multiple values from checked checkboxes?

I am trying to get multiple values from checked checkboxes and display them in a <p></p> tag. I also want to add the functionality to remove a selection by adding a cross (x) next to it.

I know there are many similar questions asked already on stackoverflow like this one, I haven't found a solution that works for me yet though.

I found this question on stackoverflow and it works great when checking the checkboxes BUT when you de-select a checkbox that has already been selected, all of the selections are removed as opposed to the one that was unchecked.

Here is a working fiddle.

Here is a screenshot of the design for the above functionality that I am trying to create: