Using isotope & perch categories - not outputting correctly

I am trying to create an isotope filter which uses the class to define the filter.

See here: https://www.soaksbathrooms.com/brands/ I had been using radio buttons and it worked great but now I am using perch categories and checkboxes as the user may need to add the items into more than one filter. It isoutputting the code wrong. See my code below.

index.php

<div class="grid">
  <?php perch_content('Brands'); ?>
</div>

category)_brand.html

<perch:categories id="category" label="Choose Category" set="brand-category" required="true" order="4" display-as="checkboxes">
    <div class="prod_box element-item <perch:category id="catSlug" type="slug" for="catTitle" label="Slug" />">
</perch:categories>

        <div class="prod_box_content">
            <h5><perch:content id="title" type="text" label="Title" html="false" required="true" title="true" /></h5>
            <a href="<perch:content id="page" type="pagelist" label="Page" />"><img src="<perch:content type="image" id="image" label="Image" width="315" height="200" crop="true" />" alt="<perch:content id="title" />" /></a>
            <p class="btn2"><a href="<perch:content id="page" />">More Info</a></p>
        </div>

        <img src="/img/box_shadow.png" class="shadow" />

    </div>

What it is outputting

<div class="grid" style="position: relative; height: 5392px;">




    <div class="prod_box element-item bathrooms" style="position: absolute; left: 0px; top: 0px;">

    <div class="prod_box element-item tiles" style="position: absolute; left: 397px; top: 0px;">

    <div class="prod_box element-item brassware" style="position: absolute; left: 794px; top: 0px;">


        <div class="prod_box_content">
            <h5>Abacus</h5>
            <a href="/brands/abacus.php"><img src="/ucontrol/resources/aventoslider-w315h200.jpg" alt="Abacus"></a>
            <p class="btn2"><a href="/brands/abacus.php">More Info</a></p>
        </div>

        <img src="/img/box_shadow.png" class="shadow">

    </div>

What it should output

<div class="prod_box element-item brassware bathrooms baths" style="position: absolute; left: 794px; top: 0px;">
        <div class="prod_box_content">
            <h5>Abacus</h5>
            <a href="/brands/abacus.php"><img src="/ucontrol/resources/aventoslider-w315h200.jpg" alt="Abacus"></a>
            <p class="btn2"><a href="/brands/abacus.php">More Info</a></p>
        </div>
        <img src="/img/box_shadow.png" class="shadow">
    </div>

Hopefully I have been clear enough to let u see the problem?