I am using the latest version of Elementor Pro, Qwery theme. (Complete begginer in HTML/CSS and also not a native English speaker).

I am taking code from Codenpen (flip cards, etc) and putting it in the elementor html widget. Everything works perfectly until I duplicate the section. The flip card appears perfectly on the editor but not on the live site. I tried everything I previously read on stackoverflow and other places (regenerating css, clearing cache, etc). Also tried giving the two different sections, different ids and different classes.

The main problems are:

a) For some reason the title of the second section keeps the first section’s link.

b) The title of the second section doesn’t change when hovered.

You can check out the link to a short video snip I made showing the problem. (The first sequence is the editor and the second is the live site).

Below you will find the code also.

First Section

<div class="flip-card">

  <div class="flip-card-inner">
  
    <div class="flip-card-front">
      <h1 class="kaleste">Καλέστε μας</h1> 
    </div>
    
    <div class="flip-card-back">
      <a class="thla" href="tel:+phone">
      <p class="thl">+phone</p>
    </div>
    
  </div>
</div>

.flip-card {
 background: linear-gradient(to left, #2493b4 0%, #f4e19f 100%);
  width: 300px;
  height: 300px;
  padding: 5px;
  border-radius: 1rem; 
    position: relative;
  z-index: 1;
  margin: auto;
  perspective: 1000px;

}

.thl{
     color: #2493b4;
  font-weight: bold;
  text-decoration: none;
  font-size: 30px;
    
}

.kaleste {
    color: #2493b4;
    font-weight: bold;
}


.flip-card-front {
  background-color: #f4e19f;
display: flex;
  justify-content: center;
  align-items: center;
   position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: .7rem;
 
}


.flip-card-back {
     position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: .7rem;
  background-color: #f4e19f;
  transform: rotateY(180deg);
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
  
}







.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(3,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
  transition: 2s;

}


.flip-card-inner::after {
 position: absolute;
 content: "";
 top: 30px;
 left: 0;
 right: 0;
 z-index: -1;
 height: 100%;
 width: 100%;
 transform: scale(0.88);
 filter: blur(25px);
 background: #2493b4;
 transition: opacity 0.5s;

 
  
 
 

Second Section

<div class="flip-card">

  <div class="flip-card-inner">
  
    <div class="flip-card-front">
      <h1 class="steilte">ΣΤΕΙΛΤΕ ΜΑΣ MAIL</h1> 
    </div>
    
    <div class="flip-card-back">
      <a class="maileds" href="mailto:[email protected]">
      <p class="mailed">[email protected]</p>
    </div>
    
  </div>
</div>

.flip-cards {
 background: linear-gradient(to left, #2493b4 0%, #f4e19f 100%);
  width: 300px;
  height: 300px;
  padding: 5px;
  border-radius: 1rem; 
    position: relative;
  z-index: 1;
  margin: auto;
  perspective: 1000px;

}

.steilte {
     color: #2493b4;
  font-weight: bold;
  text-decoration: none;
  font-size: 30px;
    
}

.mailed {
    color: #2493b4;
    font-weight: bold;
}


.flip-card-fronts {
  background-color: #f4e19f;
display: flex;
  justify-content: center;
  align-items: center;
   position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: .7rem;
 
}


.flip-card-backs {
     position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: .7rem;
  background-color: #f4e19f;
  transform: rotateY(180deg);
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
  
}







.flip-card-inners {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(3,0,0,0.2);
}

.flip-cards:hover .flip-card-inners {
  transform: rotateY(180deg);
  transition: 2s;

}


.flip-card-inners::after {
 position: absolute;
 content: "";
 top: 30px;
 left: 0;
 right: 0;
 z-index: -1;
 height: 100%;
 width: 100%;
 transform: scale(0.88);
 filter: blur(25px);
 background: #2493b4;
 transition: opacity 0.5s;

 
  
 
 

I tried everything I previously read on stackoverflow and other places (regenerating css, clearing cache, etc). Also tried giving the two different sections, different ids and different classes.