MagnificPopup removes clicked link with cloned content and wraps popup in anchor?

Question

I'm trying to show the whole of a review using magnific popup. What I have so far is a review with a clickable name that clones and then displays.

1. The problem I'm running into is that when the user clicks the name, the name is removed from the main reviews.

2. Also when the popup is open it's then wrapped with the anchor that's been clicked to open it?

The below call is used to open the popup, if you need to play with the code you can do that here jsfiddle here http://jsfiddle.net/yj4yLjkx/

	$(".show-review").on('click', function () {

	    var review = $(this).closest('li.review').clone();
	    var addReview = $(this).html(review);
	    var appendReview = $('#modal').prepend(addReview);

	    $.magnificPopup.open({
	        items: {
	            src: appendReview
	        },
	        type: 'inline',
	        callbacks: {
	            close: function () {
	                $('#modal').empty();
	            }
	        }
	    });
	});

body {
    background: grey; 
}
p {
	font-size: 1.3em;
}
#reviews ul.reviews,
li.review {
	list-style: none;
	margin: 0;
	padding: 0;
}
#reviews ul.reviews {
	margin: 1.8em 0;
}
#reviews .reviews li {
	width: 48%;
	float: left;
	padding: .5em 1.3em;
	position: relative;
	background: #fff;
	border-radius: 3px;
	box-shadow: 0 4px 6px -3px rgba(0,0,0,.3);
	margin-bottom: 2.2em;
}
#reviews .reviews li:after {
	content: "";
	position: absolute;
	bottom: 0;
	width: 93%;
	height: 60px;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI4JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjczIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ4JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjgxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.73) 28%, rgba(255,255,255,0.81) 48%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(28%,rgba(255,255,255,0.73)), color-stop(48%,rgba(255,255,255,0.81)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.73) 28%,rgba(255,255,255,0.81) 48%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.73) 28%,rgba(255,255,255,0.81) 48%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.73) 28%,rgba(255,255,255,0.81) 48%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.73) 28%,rgba(255,255,255,0.81) 48%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
}
li.review header {
	border-bottom: 1px solid #ccc;
	padding: .8em 0 1.1em;
	position: relative;
}
li.review header time {
	display: block;
	clear: both;
	color: #aaa;
	font-size: 80%;
	position: absolute;
	bottom: 0;
}
li.review article {
	padding: .8em 0 0;
	color: #999;
}
li.review article h4 {
	font-size: 1.1em;
	font-family: open_sanssemibold;
	color: #333;
}

.review {
	background: #fff;
	max-width: 900px;
	margin: 0 auto;
}
.mfp-content .review {
	position: relative;
	margin: 0 auto;
	padding: 1em 1.2em;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/magnific-popup.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js"></script>



<div id="modal" class="mfp-hide"></div>

    <div id="reviews">
    
<ul class="reviews clearfix">
    <li id="review1" class="clearfix review">
        <header>	
            <strong><a href="#" class="show-review">Robert Elliot</a></strong>
            <time>2 hours ago</time>
        </header>
        <article>
            	<h4>Very functionally rich hosting</h4>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet pretium eros. In hac habitasse platea dictumst. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
        </article>
    </li>
</ul>

    </div>

Answer 1

Use the "parents" selector to clone the "li" element and use the same to render your popup view.

$(this).html(review) removes the link, hence name is not visible.

Refer to the code below:

 $(".show-review").on('click', function () {

        var review = $(this).parents('li.review').clone();
        var appendReview = $('#modal').html(review);

        $.magnificPopup.open({
            items: {
                src: appendReview
            },
            type: 'inline',
            callbacks: {
                close: function () {
                    $('#modal').empty();
                }
            }
        });
    });