HTML checkbox form - display all selected items to the user

very simple question here, apologies if something along these lines has already been asked - I couldn't seem to work out the right search terms to find it if so.

I am using this codepen as a basis.

HTML:

<form>
<div>
<input type="radio" name="fruit" value="orange" id="orange">
<label for="orange">orange</label>
</div>
<div>
<input type="radio" name="fruit" value="apple" id="apple">
<label for="apple">apple</label>
</div>
<div>
<input type="radio" name="fruit" value="banana" id="banana">
<label for="banana">banana</label>
</div>
<div id="log"></div>
</form>

JS:

$( "input" ).on( "click", function() {
$( "#log" ).html( $( "input:checked" ).val() + "" );
});

I have changed the radio buttons to checkboxes - but I would like to alter the js so that every selected item is then shown at the bottom of the list, rather than just the first.

The purpose is for a self awareness exercise - i.e. the user could select all statements which apply to them from a long list, and then they get an output that narrows it down to just the ones they've chosen. The form response doesn't need to be saved/submitted anywhere.

I don't know a lot of js so don't know what the right changes to make would be. Is this something which is easily done, or would be too complicated for a beginner?

Many thanks!