So I have a couple of cards that will be cloned and I want to add a class when clicked inside those cards and replace it when clicked outside and I want to keep a certain class called metadata unchanged
my fiddle https://jsfiddle.net/abdotamer3/s57jauxw/27/
$(".card").on("click", function (e) {
$(this).removeClass("viewItemInactive");
$(this).addClass("viewItemActive");
});
$(document).on("click", function (e) {
if ($(e.target).is(".card") === false) {
$(".card").not(".MetaData").each(function() {
$(this).removeClass("viewItemActive");
$(this).addClass("viewItemInactive");
});
}
});
If i understand you correctly, you can just add this 2 lines to on click
$(".card").removeClass('randomClass');
$(this).addClass('randomClass');
So this will add class when you click on a card, and remove it when you click on another card and also add it again to the one you clicked.
So the on click would than be like this:
$(".card").on("click", function (e) {
$(this).removeClass("viewItemInactive");
$(this).addClass("viewItemActive");
$(".card").removeClass('randomClass');
$(this).addClass('randomClass');
});