I'm trying to add a search filter to sort my HTML elements by "data-" tag but some of the buttons I'm trying to generate from the JavaScript do not show up at all.

```
$(function() {
    var $imgs = $("#people img");
    var $buttons = $("#buttons");
    var qualities = {};

    $imgs.each(function() {
        var properties = $(this).data("qualities");

        if (properties) {
            properties.split(",").forEach(function(quality) {
                if (qualities[quality] == null) {
                    qualities[quality] = [];
                }
                qualities[quality].push(p);
            });
        }
    });

    $("<button/>", {
        text: "All",
        class: "on",
        click: function() {
            $(this).addClass("on").siblings().removeClass("on");
            $imgs.show();
        }
    }).appendTo($buttons);

    $.each(qualities, function(quality) {
        $("<button/>", {
            text: quality + " (" + qualities[quality].length + ")",
            click: function() {
                $(this).addClass("on").siblings().removeClass("on");
                $imgs.hide().filter(qualities[quality]).show();
            }
        }).appendTo($buttons);
    });

});

```

Here is a JSFiddle for it: <https://jsfiddle.net/1pxp3j9t/>

I'm not sure why one of the buttons shows up but the others do not.