Solved why i element is unclickable on live?

Sorry about my title it's 'Why my element...' I mean..
I've tested on WebStrom but when I put my code to live it become unlickable?
on my page bottom:

It's suppose to be clicked and popup a window and show a QR code, everything is normal on WebStrom.
URL:www.distance.best/distance-plugins-manager

 

You're right, jQuery fixs the problem, BUT it makes my other toggle lost function.... like menu dropdown on mobile and toggle in the post.

 

I made it work normal on WebStrom just using HTML and CSS...I didn't use any jQuery code..

 

I just simply import jQuery from CDN and fixed it but other toggle is dead.

 

www.distance.best/distance-plugins-manager
it's bottom hover button, it is functional now because I import jQuery from CDN:
using <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> on my site head.
But you can see you can't use menu bar on mobile..
Locally I use WebStrom and didn't import any jquery file or add jquery code..

 

I'll try now, but I don't understand why jQuery will make other toggle unclickable.
As long as I add jQuery file... Does this mean I can't use any jQuery file in divi?

 

If I use this plugin I have to give up my animation right?

 

I did as you said, and this plugin work well, but can you check it for me why my 'X' on popup can't close window?

 

and here is another issue:
this is css i use to delay two icon show up time, but on live on divi, it seems it can't select second "i" and they show up the same time delayed .7s
.reward_container i:nth-of-type(1) {
-webkit-transition-delay: .7s;
transition-delay: .7s;
}

.reward_container i:nth-of-type(2) {
-webkit-transition-delay: 1.5s;
transition-delay: 1.5s
}

 

I have only one problem to solve now:
this is css i use to delay two icon show up time, but on live on divi, it seems it can't select second "i" and they show up the same time delayed .7s
.reward_container i:nth-of-type(1) {
-webkit-transition-delay: .7s;
transition-delay: .7s;
}

.reward_container i:nth-of-type(2) {
-webkit-transition-delay: 1.5s;
transition-delay: 1.5s
}

 

I have only one problem to solve now:
this is css i use to delay two icon show up time, but on live on divi, it seems it can't select second "i" and they show up the same time delayed .7s
.reward_container i:nth-of-type(1) {
-webkit-transition-delay: .7s;
transition-delay: .7s;
}

.reward_container i:nth-of-type(2) {
-webkit-transition-delay: 1.5s;
transition-delay: 1.5s
}

@media screen and (width: 1024px){.popup{ padding-top: 20px!important; } why this is not work when with = 1024?

 

1.I tried, and still the same, still show up the same time.
2.I want .popup{ padding-top: 20px!} when screen width is 1024px because when the width is 1024px, my popup will go like this, and any other width it is normal: