for循环4 DOM元素及其在JS中的事件

Question

I am trying to loop these 3 images followed by their ul and li. Once clicked I came across an issue that the event handler isn't listening on any of the images other than the first. Please help me out.

Fiddle

JS

var main = function () {

    var recipeArray = ['drink', 'firstCourse', 'mainDish', 'dessert'];
    var recipeArrayLength = recipeArray.length;
    for (var i = 0; i < recipeArrayLength; i++) {

        var $checkBoxes = document.createElement('div');
        $checkBoxes.setAttribute("class", "checkBoxes");
        var $recipePicContainer = document.createElement('span');
        $recipePicContainer.setAttribute("class", "recipePicContainer");


        function makeRecipePic() {
            var recipe = document.createElement("IMG");
            recipe.setAttribute("src", "../images/grasshopper-cocktail.jpg");
            recipe.setAttribute("class", "recipe");
            $recipePicContainer.appendChild(recipe);

        }

        makeRecipePic();

        var mainContainer = document.getElementsByClassName('mainContainer');
        mainContainer[0].appendChild($checkBoxes);

        var $div = document.createElement('div');
        $div.innerHTML = 'CockTails';
        $recipePicContainer.appendChild($div);
        $checkBoxes.appendChild($recipePicContainer);

        var $recipes = document.createElement("ul");
        var $checkboxes = document.getElementsByClassName('checkBoxes');

        var x = document.createElement("INPUT");
        x.setAttribute("type", "checkbox");
    }
        for (var j = 1; j <= 6; j++) {
            var li = document.createElement("li");
            li.className = "ingredients";
            li.setAttribute("type", "checkbox");


            var a = document.createElement("a");
            a.innerHTML = "Ingredient " + j;

            li.appendChild(a);
            $recipes.appendChild(li);
        }
        var b = document.createElement("li");
        li.innerHTML = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
        li.className = "Instructions";

        $checkboxes[0].appendChild($recipes);
        $('.recipes').hide();
        $('<input type="checkbox" value="1" />').prependTo(".ingredients");
        $('.mainContainer .recipePicContainer').click(function () {
            $(this).next('ul').toggle("slow").toggleClass('selected');

        });
};
$(document).ready(main);

Answer 1

You are only appending the ul and li elements to the first checkbox. Therefore there is nothing to display when the onclick event is triggered for any of the other ones.

$checkboxes[0].appendChild($recipes);

You need to append children to the other checkboxes like you do here for the first checkbox in order for them to display something.