JSFiddle - React, Tailwind, and code Playground

by forssux

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

    
    

    <div class="page-loader">
    <p>
    Dit is tekst
    </p>
    <p>Dit is een header</p>
    </div>
    <form name="aspnetForm" method="post" action="/nl-BE/basket/" id="aspnetForm">
	   <nav>
	       
    

        <div class="twelve content">

           	<table class="checkout-basket" cellspacing="0" rules="all" border="1" id="ctl00_ctl00_cphContent_cphContent_gvBasketitem" style="border-collapse:collapse;">
		<tr>
			<th scope="col">&nbsp;</th><th scope="col">&nbsp;</th><th scope="col">Asset</th><th scope="col">&nbsp;</th>
		</tr><tr>
			<td style="width:30px;">
                                        <input id="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_CbFlag" type="checkbox" name="ctl00$ctl00$cphContent$cphContent$gvBasketitem$ctl02$CbFlag" />
                                    </td><td style="width:80px;">
                                        <a onclick="return confirm(&#39;Bent u zeker dat u deze asset wil verwijderen?&#39;);" id="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_lbDelete" class="button" href="javascript:__doPostBack(&#39;ctl00$ctl00$cphContent$cphContent$gvBasketitem$ctl02$lbDelete&#39;,&#39;&#39;)">verwijder</a>
                                    </td><td style="width:100px;">
                                                    <img id="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_Image1" src="../../cache/images/thumb/F35693E5B3DB13BB679D67F600CD1C94BC0AF382_156.jpg" style="width:80px;border-width:0px;" />
                                                </td>
                                                <td>
														<h2>
                                                            <a href='/nl-BE/asset/284542/'>
                                                                284542
                                                            </a>
                                                       ...

CSS

p {
    color: red;
    margin: 5px;
    cursor: pointer;
  }
  p:hover {
    background: yellow;
  }

JavaScript

//$("div.detail-info,table.checkout-basket").click(function () {
 //       var knopje = $(this).attr("class")//.split(" ");
 //   	console.log(knopje + " knopje was clicked");
 //       if(knopje.indexOf("detail-info") > -1) {
 //          console.log("div class detail-info is clicked");
 //   	}
 //   	else if (knopje.indexOf("checkout-basket") > -1) {
 //           console.log("table class checkout-basket is clicked");
 //   	       }
 //       else {
 //       alert ("er is op iets anderes gedrukt");
 //       }
    
    // capture click on download button in checkout-basket page
    $(".checkout-basket").click (function () {
    basket =[];
    item="";
    	str = $(this).text();
    	str = str.replace(/\s\s+/g, ' ');
    	var str = str.match(/("[^"]+"|[^"\s]+)/g);
    	console.log("Array  ",str);
    	for(var i=0;i<str.length;i++){
        if(str[i] === "verwijder"){
           console.log("Item= ",str[i+1]);
    	   item = str[i+1];
    	  basket.push(item);}
    	}
    	console.log("Basket contains ",basket);
    	//console.log("idValBasket ",idVal);
    	var test = idVal.replace(/\$/gi, "_").slice(0,-6);
    	console.log("test ",test);
    	var element = test.substr(test.length - 2)-1;
    	console.log("element ",element);
    	element=element-1;
    	item = basket[element];
        console.log("Item finaal is ",item);
    	console.log (" download item piwik GF",item);
    });
    
    $(".button.button-dl").click(function () {
    	var addressValue = $(this).attr('href');
    	console.log("addresValue Basket",addressValue );
    	var re = /'(.*?)'/;
    	var m = addressValue.match(re);
    	console.log (" m basket is ",m);
    	if (m != null)
        idVal = (m[0].replace(re, '$1'));
    	console.log("idVal Basket",idVal);
      });
      
    //This section captures the download in the detail page
     
    $(".button").click(function () {
    	var item = document.getElementsByTagName("h1")[0].innerHTML 
    	console.log("addresValue detail",item );
   ...