Jquery, show and layer divs when their checkboxs are selected

I am making a page in which you select sandwich toppings with checkboxes, and after you click submit those sandwich option divs containing images will show. By default they are all hidden. I want the first div that is shows to be fixed while the rest of the toppings layer on top of the first one. I'll eventually set it up so that while you scroll down, the toppings appear to move up and over the previous topping. So, if you select bagel-bottom and bacon, you scroll down to see a bagel bottom and keep scrolling for the bacon to move up on top of the bagel bottom.

The first topping div in the HTML order is bagel-bottom, but even though I select "bacon" the only div that shows is bagel-bottom.

I have the jsfiddle here: http://ift.tt/1I9mbsw

$(document).ready(function() {
    $('#sandwich-option-submit').click(function() {
        var checkedTopping = $('.sandwich-option').val();
        var divCheckedTopping = $('#'+ checkedTopping);
        var optionsContainer = $('#sandwich-selection-container');
            if($('.sandwich-option').is(':checked')) {
                $(divCheckedTopping).show().addClass('display');
                $(divCheckedTopping).eq(0).addClass('first-checked-topping');
            } else {
                $(divCheckedTopping).hide();
            };

    });

});