Issues with emptying and appending content to DOM

I'm currently building out a work portfolio section for my personal website. The url for the work page can be viewed here:  jacobtarr.github.io/work.

The jQuery code for my project is:
/* Set Slick slider settings
=============================== */
slickSliderConfig = function() {

	var projectGalleryArrowPrev = '<a><img class="project-gallery-arrow-prev" src="../img/work/arrow-left-btn.svg"></a>'
	var projectGalleryArrowNext = '<a><img class="project-gallery-arrow-next" src="../img/work/arrow-right-btn.svg"></a>'

	$('.project-gallery').slick({
		speed: 300,
		slide: 'figure',
		fade: true,
		speed: 600,
		cssEase: 'linear',
		prevArrow: projectGalleryArrowPrev,
		nextArrow: projectGalleryArrowNext
	});

	$('.more-projects-gallery').slick({
		speed: 300,
		slide: '.more-projects-gallery-img-container',
		infinite: true,
		slidesToShow: 4,
		slidesToScroll: 4,
		prevArrow: projectGalleryArrowPrev,
		nextArrow: projectGalleryArrowNext,
		responsive: [
			{
				breakpoint: 800,
				settings: {
					slidesToShow: 3,
					slidesToScroll: 3,
					infinite: true
				}
			},
			{
				breakpoint: 680,
				settings: {
					slidesToShow: 2,
					slidesToScroll: 2,
					infinite: true
				}
			},
			{
				breakpoint: 410,
				settings: {
					slidesToShow: 1,
					slidesToScroll: 1,
					infinite: true
				}
			}
		]
	});
}

/* Initialize slider
=============================== */
$(function(){
	slickSliderConfig();
});

/* Load project content
=============================== */

$(function loadProjectContent() {
	var $projectContainer = $('.project-container');
	var $moreProjectsGalleryImageContainer = $('.more-projects-gallery-img-container');
	var $moreProjectsGalleryImage = $('.more-projects-gallery-img-container img');

	// Select specific projects in project-container
	var $projectGregMauz = $('#project-gregmauz');
	var $projectPersonal = $('#project-personal');
	var $projectSyllabus = $('#project-syllabus');

	// Select project thumbnails in more-projects-gallery
	var $thumbnailGregMauz = $('.more-projects-gallery-img-container .thumbnail-gregmauz');
	var $thumbnailPersonal = $('.more-projects-gallery-img-container .thumbnail-personal');
	var $thumbnailSyllabus = $('.more-projects-gallery-img-container .thumbnail-syllabus');

	// Detach the non-default specific projects from DOM
	$projectPersonal.detach();
	$projectSyllabus.detach();

	// When user clicks Greg Mauz thumbnail image
	$thumbnailGregMauz.on("click", function(){
		$projectContainer.empty();
		$projectContainer.append($projectGregMauz);
	});

	// When user clicks Personal thumbnail image
	$thumbnailPersonal.on("click", function(){
		$projectContainer.empty();
		$projectContainer.append($projectPersonal);
	});

	// When user clicks Syllabus thumbnail image
	$thumbnailSyllabus.on("click", function(){
		$projectContainer.empty();
		$projectContainer.append($projectSyllabus);
	});

});

Open in new window


The HTML consists of:
<section class="work-section">
	<div class="ribbon-container">
		<div class="ribbon">
			<div class="ribbon-content">
				<h6>Work</h6>
			</div>
		</div>
	</div>
	<div class="project-container">
		<div id="project-gregmauz">
	<div class="project-gallery">
		
		<figure>
			<img src="../img/projects/gregmauz/imac-preview-gregmauz.png" alt="imac-preview-gregmauz">
		</figure>
		
		<figure>
			<img src="../img/projects/gregmauz/mobile-preview-gregmauz.png" alt="mobile-preview-gregmauz">
		</figure>
		
	</div>
	<article class="project-info">
		<h2>Greg Mauz</h2>
		<ul class="project-facts">
			
			<li class="project-fact">
				<div class="project-fact-title">
					Status
				</div>
				<div class="project-fact-description">
					In-Progress
				</div>
			</li>
			
			<li class="project-fact">
				<div class="project-fact-title">
					Current Repository/URL
				</div>
				<div class="project-fact-description">
					https://github.com/jacobtarr/gregmauz
				</div>
			</li>
			
			<li class="project-fact">
				<div class="project-fact-title">
					Technologies Used
				</div>
				<div class="project-fact-description">
					HTML, CSS, jQuery, Jekyll
				</div>
			</li>
			
			<li class="project-fact">
				<div class="project-fact-title">
					Description of Project
				</div>
				<div class="project-fact-description">
					Greg Mauz is a local radio talent in my hometown. This is a static website generated by Jekyll that contains his resume and audio clips. Uses flexbox for some of the layout and a little bit of Bootstrap.
				</div>
			</li>
			
		</ul>
	</article>
</div>
		<div id="project-personal">
	<div class="project-gallery">
		
		<figure>
			<img src="../img/projects/personal/imac-preview-personal.png" alt="imac-preview-personal">
		</figure>
		
		<figure>
			<img src="../img/projects/personal/mobile-preview-personal.png" alt="mobile-preview-personal">
		</figure>
		
	</div>
	<article class="project-info">
		<h2>Personal Porfolio</h2>
		<ul class="project-facts">
			
			<li class="project-fact">
				<div class="project-fact-title">
					Status
				</div>
				<div class="project-fact-description">
					Completed
				</div>
			</li>
			
			<li class="project-fact">
				<div class="project-fact-title">
					Current Repository/URL
				</div>
				<div class="project-fact-description">
					https://github.com/jacobtarr/personal
				</div>
			</li>
			
			<li class="project-fact">
				<div class="project-fact-title">
					Technologies Used
				</div>
				<div class="project-fact-description">
					HTML, CSS, jQuery, Jekyll
				</div>
			</li>
			
			<li class="project-fact">
				<div class="project-fact-title">
					Description of Project
				</div>
				<div class="project-fact-description">
					Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
				</div>
			</li>
			
		</ul>
	</article>
</div>
		<div id="project-syllabus">
	<div class="project-gallery">
		
		<figure>
			<img src="../img/projects/syllabus/imac-preview-syllabus.png" alt="imac-preview-personal">
		</figure>
		
		<figure>
			<img src="../img/projects/syllabus/mobile-preview-syllabus.png" alt="mobile-preview-personal">
		</figure>
		
	</div>
	<article class="project-info">
		<h2>Personal Porfolio</h2>
		<ul class="project-facts">
			
			<li class="project-fact">
				<div class="project-fact-title">
					Status
				</div>
				<div class="project-fact-description">
					Completed
				</div>
			</li>
			
			<li class="project-fact">
				<div class="project-fact-title">
					Current Repository/URL
				</div>
				<div class="project-fact-description">
					https://github.com/jacobtarr/syllabus
				</div>
			</li>
			
			<li class="project-fact">
				<div class="project-fact-title">
					Technologies Used
				</div>
				<div class="project-fact-description">
					HTML, CSS, jQuery, Jekyll
				</div>
			</li>
			
			<li class="project-fact">
				<div class="project-fact-title">
					Description of Project
				</div>
				<div class="project-fact-description">
					Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
				</div>
			</li>
			
		</ul>
	</article>
</div>
	</div>
	<div class="more-projects-container">
		<h2>Check out my other projects</h2>
		<div class="more-projects-gallery">
			
			<div class="more-projects-gallery-img-container">
				<figure>
					<img class="thumbnail-gregmauz" src="../img/projects/gregmauz/thumbnail-preview-gregmauz.png" alt="thumbnail-preview-gregmauz">
					<span></span>
				</figure>
			</div>
			
			<div class="more-projects-gallery-img-container">
				<figure>
					<img class="thumbnail-personal" src="../img/projects/personal/thumbnail-preview-personal.png" alt="thumbnail-preview-personal">
					<span></span>
				</figure>
			</div>
			
			<div class="more-projects-gallery-img-container">
				<figure>
					<img class="thumbnail-syllabus" src="../img/projects/syllabus/thumbnail-preview-syllabus.png" alt="thumbnail-preview-syllabus">
					<span></span>
				</figure>
			</div>
			
		</div>
	</div>
</section>

Open in new window

What the jQuery is doing is pretty simple. I'm detaching multiple child nodes (except first one) from the class .project-container. Then I'm reattaching them by appending them to the class .project-container when a user clicks on a thumbnail image in the bottom slider (the more projects slider). However, I've come across a couple problems.

The main problem I'm having with this code is that when a user clicks on an image in the "more-projects" gallery, the slider below the project content, the main slider's (the top slider) positioning gets all messed up when a projects gets appended to the ".project-container". Interestingly, the position gets reset (i.e. it gets re-centered) after a user clicks those navigation arrows.

Another major problem I'm having is that when a user clicks on an image more than once in the "more-projects" gallery, the top slider's navigation functionality doesn't work anymore.

If someone can help me a find a solution to this problem, I would really appreciate it. Refactor it if need be. I'm just struggling to find a simple solution to this where I can
journeybeginsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Ermm why not just hide/show them?
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
journeybeginsAuthor Commented:
@Gary Thanks I ended up taking your advice and it worked great
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.