Select and Deselect in Laravel and Javascript

I'm creating a function which allows a user to select and deselect multiple products with Javascript, The problem is it shows only one checkbox instead of each product to have its checkbox .If I have 20 products it shows 1 checkbox for the first product, how can I fix this?

Blade file

<span><a class="Select-Deselect" href="">Select</a></span>

   @foreach($products as $product)
     <div id="checkBox" style=" display:none; position:absolute;">
         <div class="checkbox">
        <label><input type="checkbox" value="" name="checked[]"></label><br />
       </div>
    </div>
<p ><b>Available :  In Stock</b></p>
  @endforeach

Javascript

   <script>
    /* Select deselect */
    $(".Select-Deselect").click(function(e) {
if ($(this).html() == "Select") {
    document.getElementById("checkBox").style.display="block";
    $(this).html('Deselect');


}
else {
    $(this).html('Select');
    document.getElementById("checkBox").style.display="none";
}
return false;
});
</script>

via Chebli Mohamed