$(this).toggleClass using Google's MDL

So I'm busy creating a mini webshop, and I'm using google's front-end (MDL) template

What I wanted to do in my webshop is, when a user clicks on x product I want to toggle a class,

I'm using closures inside loops to detect clicks on any product.

My only issue is, the class won't toggle. I tried using addClass which does work but its not as convenient because I really want to toggle the class (From selected product to not selected)

Checkout my snippet & you will understand, you will see that I do detect the clicks properly. But toggling the classes doesn't work.

$(document).ready(function() {
    console.log("Document ready");
  for (var i = 1; i < $(".products").length; i++) {
        (function(index){
        $(".products").click(
            function(e){
            console.log("click successfull!");
            console.log(this);
             $(this).css("border", "1px solid #1976D2");
             
             $(this).toggleClass("mdl-shadow--16dp");
            });
        })(i);
    }

    $("#Card").keyup(function(event){
            if(event.keyCode == 84){
            console.log("Class toggled!");
            $(".products").toggleClass("mdl-shadow--2dp mdl-shadow--16dp");
            }
        });
  
  });

.mdl-card__actions{
  display: flex;
  box-sizing:border-box; 
  align-items: center;
}
.page-content .mdl-card {
    display: inline-block;
    margin: 5px 5px 5px 5px;    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.indigo-pink.min.css">
    <script src="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div class="page-content">
                            <!-- Your content goes here -->
                            <div class="mdl-card mdl-shadow--2dp products">
                                <div class="mdl-card__title">
                                    <h2 class="mdl-card__title-text">Dell XP13 </h2>
                                </div>
                                <img src="https://gyazo.com/ca2c6eaffd51939b1466f1c5beffceeb" alt="dell xp13">
                                <div class="mdl-card__supporting-text"><b>Basisprijs: 1.649,00$<b></div>
                                <div class="mdl-card__actions mdl-card--border">
                                    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                                        Add to cart
                                    </a>
                                    <div class="mdl-layout-spacer"></div>
                                    <i class="material-icons">add_shopping_cart</i>
                                </div>
                            </div>      
                            <div class="mdl-card mdl-shadow--2dp products">
                            <div class="mdl-card__title">
                                <h2 class="mdl-card__title-text">Chromebook pixel2</h2>
                            </div>
                            <img src="https://i.gyazo.com/efd1645b89adfa1c7feea80507b23954.png" alt="chrombook">
                            <div class="mdl-card__supporting-text"><b>Basisprijs: 999,99$<b></div>
                            <div class="mdl-card__actions mdl-card--border">
                                <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                                    Add to cart
                                </a>
                                <div class="mdl-layout-spacer"></div>
                                    <i class="material-icons">add_shopping_cart</i>
                            </div>
                        </div>
                        <div class="mdl-card mdl-shadow--2dp products">
                            <div class="mdl-card__title">
                                <h2 class="mdl-card__title-text">Macbook 13'</h2>
                            </div>
                            <img src="https://gyazo.com/a218472cdab1fae8de7bbe37eef35ac2" alt="Macbook">
                            <div class="mdl-card__supporting-text"><b>Basisprijs: 1.129,00$<b></div>
                            <div class="mdl-card__actioder">
                                <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                                    Add to cart
                                </a>
                                <div class="mdl-layout-spacer"></div>
                                    <i class="material-icons">add_shopping_cart</i>
                            </div>
                        </div>
                    </div>
  </body>

I will show you the effect I'm toggling in a separate link, in this link I'm toggling the effect for all the "divs" But I won't it to be per click.

Solution

I'm not sure for what you would need a loop here, but in my opionion this could be the reason why it wasn't working. I've set up a snippet without a loop, so now toggleClass() works well, I've also added a .border class to css, it's easier to handle it like this. Further, I've combined both toggleClass() in one line, but it's just an optical thing.

Check out the snippet

$(document).ready(function() {
  console.log("Document ready");
  $(".products").click(function() {
    console.log("click successfull!");
    console.log(this);
    $(this).toggleClass("border").toggleClass("mdl-shadow--16dp");

  });

  $("#Card").keyup(function(event) {
    if (event.keyCode == 84) {
      console.log("class toggled!");
      $(".products").toggleClass("mdl-shadow--2dp mdl-shadow--16dp");
    }
  });
});

.mdl-card__actions {
  display: flex;
  box-sizing: border-box;
  align-items: center;
}
.page-content .mdl-card {
  display: inline-block;
  margin: 5px 5px 5px 5px;
}
.border {
  border: 1px solid #1976D2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="page-content">
    <!-- Your content goes here -->
    <div class="mdl-card mdl-shadow--2dp products">
      <div class="mdl-card__title">
        <h2 class="mdl-card__title-text">Dell XP13 </h2>
      </div>
      <img src="https://gyazo.com/ca2c6eaffd51939b1466f1c5beffceeb" alt="dell xp13">
      <div class="mdl-card__supporting-text"><b>Basisprijs: 1.649,00$<b></div>
                                <div class="mdl-card__actions mdl-card--border">
                                    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                                        Add to cart
                                    </a>
                                    <div class="mdl-layout-spacer"></div>
                                    <i class="material-icons">add_shopping_cart</i>
                                </div>
                            </div>      
                            <div class="mdl-card mdl-shadow--2dp products">
                            <div class="mdl-card__title">
                                <h2 class="mdl-card__title-text">Chromebook pixel2</h2>
                            </div>
                            <img src="https://i.gyazo.com/efd1645b89adfa1c7feea80507b23954.png" alt="chrombook">
                            <div class="mdl-card__supporting-text"><b>Basisprijs: 999,99$<b></div>
                            <div class="mdl-card__actions mdl-card--border">
                                <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                                    Add to cart
                                </a>
                                <div class="mdl-layout-spacer"></div>
                                    <i class="material-icons">add_shopping_cart</i>
                            </div>
                        </div>
                        <div class="mdl-card mdl-shadow--2dp products">
                            <div class="mdl-card__title">
                                <h2 class="mdl-card__title-text">Macbook 13'</h2>
                            </div>
                            <img src="https://gyazo.com/a218472cdab1fae8de7bbe37eef35ac2" alt="Macbook">
                            <div class="mdl-card__supporting-text"><b>Basisprijs: 1.129,00$<b></div>
                            <div class="mdl-card__actioder">
                                <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                                    Add to cart
                                </a>
                                <div class="mdl-layout-spacer"></div>
                                    <i class="material-icons">add_shopping_cart</i>
                            </div>
                        </div>
                    </div>
  </body>