How to change the code so that in the mobile version activation occurs on the second click?

Question

JavaScript

Friends, there is a list with elements. A hover effect hangs on the elements - a red square pops up on the left. When you click on an element, the jQuery toggleClass function is called. The desktop version is great. But when I switch to the mobile version, a problem arises. The fact is that the hover effect in the mobile version is called only by tap, but when I tap on an element, it immediately calls toggleClass. I want that in the mobile version, the first tap only causes the hover of the element (i.e., how to select the element), and when the element is selected, then the toggle is called by a single click. I almost implemented it, but there is an error in the logic of the code, toggle is called by double clicking even when the element is selected.

https://jsfiddle.net/h2dgkzqj/21/

Answer 1

https://jsfiddle.net/h2dgkzqj/21/

Answer 2

and if you hang the click event on $(element:hover).click(...