Currently, I am facing an issue with a card section that contains two buttons and a description. The first button adds an image which is working perfectly fine, as well as the description section. On the other hand, the second button adds a video and when clicked, it flips the card to reveal some information behind it. However, the problem arises when I replicate the same code for another section. At this point, the flip function of the first section works, but the flip function of the second section does not work; meaning only one flip function works at a time.
https://i.stack.imgur.com/wcsZa.jpg
https://i.stack.imgur.com/YvzhD.jpg
<script>
// Init Simple Cropper
$('.cropme').simpleCropper();
$('#portrait').hide();
$('.switch').click(function (){
$(this).text("Switch to "+($('#portrait').is(":visible") ? "Portrait" : "Landscape"));
$('#portrait').toggle();
$('#landscape').toggle();
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function(event) {
document.getElementById('flip-card-btn-turn-to-back').style.visibility = 'visible';
document.getElementById('flip-card-btn-turn-to-front').style.visibility = 'visible';
document.getElementById('flip-card-btn-turn-to-back').onclick = function() {
document.getElementById('flip-card').classList.toggle('do-flip');
};
document.getElementById('flip-card-btn-turn-to-front').onclick = function() {
document.getElementById('flip-card').classList.toggle('do-flip');
};
});
</script>.flip-card-3D-wrapper {
position: relative;
-o-perspective: 900px;
-webkit-perspective: 900px;
-ms-perspective: 900px;
perspective: 900px;
margin: 0 auto;
}
#flip-card {
width: 100%;
height: 400px;
text-align: center;
position: absolute;
-o-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-o-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.do-flip {
-o-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
#flip-card-btn-turn-to-back {
position: absolute;
top: 46%;
right: 29%;
width: 145px;
height: 46px;
background: white;
cursor: pointer;
visibility: hidden;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 13px;
padding: 0;
border-radius: 50px;
color: #000;
}
#flip-card-btn-turn-to-front {
position: absolute;
top: 2%;
left: 2%;
width: 40px;
height: 40px;
background: white;
cursor: pointer;
visibility: hidden;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: .7em;
padding: 0;
border: 1px solid #00666a;
border-radius: 50px;
}
#flip-card .flip-card-front, #flip-card .flip-card-back{
width: 100%;
height: 100%;
position: absolute;
-o-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 2;
}
#flip-card .flip-card-front {
background: #1fa5ad;
}
#flip-card .flip-card-back {
background: #00666a;
-o-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
width: 350px;
height: 400px;
right: 0%;
}
#flip-card .flip-card-front p, #flip-card .flip-card-back p {
color: #fff;
display: block;
position: absolute;
width: 80%;
left:8%;
font-size:14px;
font-family: 'Open Sans', sans-serif;
margin-top: -167px;
padding: 20px!important;
transform: translateX(0px);
}
#flip-card .flip-card-front p, #flip-card .flip-card-back p a{
color: #ffc20e;
text-decoration: none;
}<div id="flip-card">
<div class="flip-card-front">
<div class="cropme" id="landscape1" style="width: 350px; height: 400px;"></div>
<button id="flip-card-btn-turn-to-back">Add Video</button>
<textarea name="form_message" class="form-control required border-r-none ht-gallery-new" rows="5" placeholder="Add Description" aria-required="true"></textarea>
</div>
<div class="flip-card-back"><div class="inner">
<div class="description">
<p><strong>Note:</strong> <a href="https://www.youtube.com/" target="_blank">Click</a> here to see how to find embedded video url</p>
<input type="text" required="" placeholder="Paste Embedded Video Url Here" name="gmap" class="form-control allow_only_alphabet space video-url-new">
<textarea name="form_message" class="form-control required border-r-none add-des-new" rows="5" placeholder="Add Description" aria-required="true"></textarea>
</div>
</div>
<img src="images/return-btn.png" id="flip-card-btn-turn-to-front" class="return-btn-bg"></div>
</div>