Get the data-attribute of 2 differente div that have the same class.

So, what is happening here is that you have two click functions that are both being run each time you click any card, which will of course set your variable cardOne and cardTwo to the same value. It seems as though you're trying to create a card matching game of sorts, so you're going to need to create code that knows whether it is the first or second card the user has flipped. You can do this in several ways, such as creating a global variable that stores how many cards have been flipped, or even appending a class such as flipped or something to the div that was clicked first (this is probably better practice). In either case, you're going to need to use just one $(".cards").on("click", function(){ }); with an if/else statement inside. If you're just beginning on JavaScript and jQuery, this might be a little advanced, and you might want to wait until you have a bit better grasp on them.

As for your shuffling function, this will probably require you to know how to use arrays and generate random numbers, so you might want to study that to figure out how to shuffle your cards.