JSFiddle - React, Tailwind, and code Playground

by sidouglas

HTML

<link rel="stylesheet" href="http://demos.jquerymobile.com/1.4.2/css/themes/default/jquery.mobile-1.4.2.min.css">
<script src="http://demos.jquerymobile.com/1.4.2/js/jquery.mobile-1.4.2.min.js"></script>
<section data-role="page" id="product_details" data-title="category page" data-url="/productdetails.php" data-external-page="true" tabindex="0" class="ui-page ui-page-theme-a ui-page-active" style="padding-bottom: 54px; min-height: 1029px; position: relative;">
    <div role="main" class="ui-content single_product">
			    <div id="bread_crumb" class="bread_crumb module">
        <ul>
            <li><a href="/" class="f-small-logo ui-link"></a></li>
            <li class="f-angle-right"><a href="/category.php" class="ui-link">Underwear</a></li>
            <li class="f-angle-right"><span>Classic Orginal Navy</span></li>
        </ul>
    </div>			
		<div class="info user_selection">
			<h5 class="title">Classic Original Navy</h5>
			<p class="description">The original 'Classic' is back!
				<br>
				<span class="old_price">AUD 17.95</span>
				<span class="current_price">AUD 10.75</span>
			</p>
		</div>

		<div id="product_details_slider" class="loaded" style="display: block; height: auto;"><div class="slider swipe" style="visibility: visible;">
	  <div class="swipe-wrap" style="width: 1509px; height: auto;">
	   
		  <div class="slide" data-index="0" style="width: 503px; left: 0px; transition: 0ms; -webkit-transition: 0ms; -webkit-transform: translate(0px, 0px) translateZ(0px);">
		  	
		  		<a href="#"><img src="https://c8804442.ssl.cf2.rackcdn.com/content/items/2085_classic_original_brief_navy/ZM_und_classic_brf_dark-blue_01_131002151610.jpg" alt="3d" data-dom-cache="false" data-transition="slide"></a>
			  	
	  	</div>
	   
		  <div class="slide" data-index="1" style="width: 503px; left: -503px; transition: 0ms; -webkit-transition: 0ms; -webkit-transform: translate(503px, 0px) translateZ(0px);">
		  	
		  		<a href="#"><img...

JavaScript

$(document).on("pagecreate", function(){    
    var opts = $("#select-custom-18 option");
    $( "#select-custom-18-listbox-popup" ).on( "popupafteropen", function( event, ui ) {
        $("#select-custom-18-menu li").each(function(index){
            if ($(this).find("img").length == 0){
                var imageURL = opts.eq(index).data("image");
                var imgElem = '<img src=' + imageURL + ' width="32px" height="32px" />';
                $(this).find("a").prepend(imgElem);
            }
        });
    });
});