JQuery using .html to past ajax data in table

I have a problem with pasting some html into a div. I think I know what I'm doing wrong but I cannot find a solution to this. I have an empty div called "allbrands". This div is getting filled with data from an POST ajax call after a button has been clicked. I have made a loop that loops through the data, but it replaces the html constantly. So how can i paste this html table without replacing everytime the content?

My div:

<div id="allbrands">

</div>

My Ajax:

<script type="text/javascript">
    $( document ).ready(function()
    {
        $('[name="getbrands"]').click(function (e){
            e.preventDefault();
            $.ajax({
                type: "GET",
                url: '/brands/all',
                success: function (data)
                {
                       for(var i = 0; i < data.length; i++) {
                           $('#allbrands').html('<h6>' + data[i] + '</h6><hr>');
                       }
                }
            });
        });
    });
</script>

The data is filled like this:

via Koen van de Sande