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="checkBox1" style=" display:none; position:absolute;">
       <h1>hello</h1>
     </div>
  @endforeach

Javascript

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


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

via Chebli Mohamed