Individual Checkbox Image Replacement

I am looking to try something like in the below link, however I want different images for each checkbox. Is there any way to do this? I have tried setting different classes for each item and just adding the class to the checkbox, but that doesnt seem to work...the default checkboxes just remain the same.

MY ATTEMPT: http://ift.tt/1TgjBcS

<div class="AccordionPanel" id="acc-step-3">
    <div class="AccordionPanelTab">Step Three - Equipment Package</div>
    <div class="AccordionPanelContent">
        <div class="">
            <input type="checkbox" name="equipment" value="speakers" id="equipment_0" class="speaker">
            <input type="checkbox" name="equipment" value="subwoofer" id="equipment_1" class="subwoofer">
            <input type="checkbox" name="equipment" value="smoke-machine" id="equipment_2" class="smokemachine">
            <input type="checkbox" name="equipment" value="moving-head" id="equipment_3" class="movinghead">
        </div>

        <div class="form-gap"></div>

        <input name="previous" id="acc-step-prev-3" type="button" class="form-btn form-prev" value="Previous">
        <input name="next" id="acc-step-next-3" type="button" class="form-btn form-next" value="Next"><br>
        <input name="reset" type="reset" class="form-btn form-reset" value="Reset">
    </div>              
</div>

EXAMPLE OF THE RESULT I WOULD LIKE: http://ift.tt/21Pugwl (Except with individual images for each checkbox)