JSFiddle - React, Tailwind, and code Playground

by popmouth

HTML

<div class="wrap">
  <div id="item1" class="gallery-item">
    <a href="#" class="btn">
      Clone me!
    </a>
    <div class="title LB-clone">
      <h2>
        ITEM 1
      </h2>
    </div>
    <div class="info LB-clone">
      <p>
      Some info
      </p>
    </div>
  </div>
    <div id="item2" class="gallery-item">
    <a href="#" class="btn">
       Clone me!
    </a>
    <div class="title LB-clone">
      <h2>
        ITEM 2
      </h2>
    </div>
    <div class="info LB-clone">
      <p>
      Some info!
      </p>
    </div>
  </div>
</div>
<div class="lightbox">
  <h2>
   LIGHTBOX:
  </h2>
  <div class="title">
    <!-- content from JS -->
  </div>
  <div class="info">
   <!-- content from JS -->
  </div>
</div>

JavaScript

jQuery('a.btn').click(function(e){
  		$this = jQuery(this);
      cloneContent($this);
  });
  
		function cloneContent($projectItem) {
			//V2
			$lightBox = jQuery('.lightbox');	
			
			$LBChild = $lightBox.find('*'); //any child
		
			
			$LBChild.each( function(i, e) {
				
				$LBclone = jQuery('.LB-clone'); //item to clone
				
				_LBclasses = this.classList;
				
				for(var i=0,len=_LBclasses.length; i<len; i++) {
					if ($LBclone.hasClass(_LBclasses[i])) {
						
						$LBmatch = jQuery(this);
						alert('outside: ' + $LBmatch.attr('class')); //check
						$clonePair = $projectItem.parents('.gallery-item').find('.LB-clone.' + _LBclasses[i]);
						$clonePairHtml = $clonePair.html();
						$LBmatch.animate({opacity: 0 },250, function() {
						alert('inside: ' + $LBmatch.attr('class'));	
							$LBmatch.html($clonePairHtml).animate({opacity : 1}, 500);
						})
					}
				}
			});
		} //close cloneContent