JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
</head>
<body>
<div>
    <div>
        <p>This is my product</p>
        <div id="preview">
        <img src="http://trus.imageg.net/graphics/product_images/pTRU1-10669782reg.jpg">
        </div>
    </div>
    <ul id="images">
        <li><img src="http://trus.imageg.net/graphics/product_images/pTRU1-8966583dt.jpg"></li>
        <li><img src="http://trus.imageg.net/graphics/product_images/pTRU1-8807664dt.jpg"></li>
        <li><img src="http://trus.imageg.net/graphics/product_images/pTRU1-10669782dt.jpg"></li>
        <li><img src="http://trus.imageg.net/graphics/product_images/pTRU1-10168635dt.jpg"></li>
        <li><img src="http://trus.imageg.net/graphics/product_images/pTRU1-11325637dt.jpg"></li>
        <li><img src="http://trus.imageg.net/graphics/product_images/pTRU1-9428817dt.jpg"></li>
        <li><img src="http://trus.imageg.net/graphics/product_images/pTRU1-9407103dt.jpg"></li>
          <li><img src="http://trus.imageg.net/graphics/product_images/pTRU1-8765906_alternate2_dt.jpg"></li>
          <li><img src="http://trus.imageg.net/graphics/product_images/pTRU1-8966576dt.jpg"></li>    
    </ul>
</div>
    
    <a href="#" id="show">Show</a>
</body>
</html>

JavaScript

(function($){
    var $images = createDiv(),
        totalWidth = 0;
    
    //loop through a list of images
    $("#images > li > img").each(function(){
        var $this = $(this),
            $img = $this.clone(); //createa  duplicate of the images
           
        $img.height(100); //resize each duplicate to a set height
        
        $img.css(
            {
                'position': 'absolute',
                'left' : -10000 + 'px',
            });
        $img.appendTo($('body'));
        
        totalWidth += $img.width(); //always equals zero
        //this always results in 0 too 
        //totalWidth += $img.get(0).clientWidth; 
        console.log(totalWidth);
        
        //add the cloned image to the div
        $img.css({'position' : 'static'}).appendTo($images);
        
        //remove full sized image to reattach later
        $this.remove();
    });
    
    $images.hide();
    
    $("body").append($images);
    

    $("#show").on('click',function(){
        $images.show();
    });
                  
    function createDiv(){
        return $('<div id="imgs"></div>');
    }
}(jQuery));