JQuery toggleClass not working with dynamic data

Question

From my code, When i click on share icon it popover and shows some social media sharing icons. Toggle is working only when click on share icon and then clicks cross(X) icon. If i click share icon and click elsewhere on page and then click on cross(X) icon toggle is not working. Can anyone please suggest how to fix this.

https://jsfiddle.net/n9eaojg5/22/

var courseslist = "";
for(var i=0; i<3;i++){

courseslist += "<div class='card__share'>";
courseslist += "<div class='card__social'>";
courseslist += "<a class='share-icon facebook' href='#'><span class='fa fa-facebook'></span></a>";
courseslist += "<a class='share-icon twitter' href='#'><span class='fa fa-twitter'></span></a>";
courseslist += "<a class='share-icon googleplus' href='#'><span class='fa fa-google-plus'></span></a>";
courseslist += "</div>";
courseslist += "<a id='share' class='share-toggle share-icon' href='#'></a>";
courseslist += "</div>";
courseslist += "</br>";
courseslist += "</br>";
}
$("#courseslist").html(courseslist);

  $(document).ready(function () {
        $('.card__share > a').on('click', function (e) {
            e.preventDefault() // prevent default action - hash doesn't appear in url
            $(this).parent().find('div').toggleClass('card__social--active');
            $(this).toggleClass('share-expanded');
        });
       

    });

.card__share {
float:right;
position: relative;
}
                
.card__social {
position: absolute;
top: 0;
right: -48px;
visibility: hidden;
width: 160px;
transform: translateZ(0);
transform: translateX(0px);
transition: transform 0.35s ease;
}
                
.card__social--active {
visibility: visible;
transform: translateZ(0);
transform: translateX(-48px);
transition: transform 0.35s ease;
}
                
.share-toggle {
z-index: 2;
}
                
.share-toggle:before {
content: "\f1e0";
font-family: 'FontAwesome';
color: #fff;
}
                
.share-toggle.share-expanded:before {
content: "\f00d";
}
                
.share-icon {
display: inline-block;
width: 36px;
height: 36px;
line-height: 36px;
text-align: center;
border-radius: 50%;
color: white;
background-color: grey;
transition: all 0.3s ease;
outline: 0;
font-family: FontAwesome;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
}
                
.share-icon:hover,
.share-icon:focus {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12), 0 3px 6px rgba(0, 0, 0, 0.24);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
                
.facebook {
background-color: #3b5998;
}
                
.twitter {
background-color: #00abe3;
}
                
.googleplus {
background-color: #d3492c;
}
                
span.facebook,
span.twitter,
span.googleplus {
color: #fff;
font-family: FontAwesome;
}
                
.facebook:hover,
.twitter:hover,
.googleplus:hover {
color: #eee;
}
                

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="courseslist">

</div>

Answer 1

The problem is that z-index doesn't work with position: static. You need to have the share toggle positioned relative and then it works fine.

.share-toggle {
  position:relative;
  z-index: 2;
}