JSFiddle - React, Tailwind, and code Playground

by cambraca

HTML

<div id="products">
    <ul>
    </ul>
</div>

CSS

div, ul {margin: 10px; padding: 10px;}
div {border: 1px solid green;}
ul {border: 1px solid red;}

JavaScript

var imgSrc = new Array ("images/hangings/1.jpg","images/hangings/2.jpg");
var prices = new Array (100,50);
var sizes = new Array ("450*350","100*50");

function load()
{
if(displayProductInfo==true)
{
    for (var i = 0; i < prices.length; i++)
    {
        $('#products ul').append('<li><img src="'+imgSrc[i]+'" width="525px" height="350px"/></li>');
        $('#products ul').append('<li>Price: £' + prices[i] +'</li>');
        $('#products ul').append('<li>Size: ' + sizes[i] +'</li>');
        $('#products ul').append($('<button />', {'data-item': i}).text('Add To Basket').click(addToBasket));
    }
}
}

function addToBasket()
{
    alert("clicked on " + $(this).attr('data-item'));
}


var displayProductInfo = true;
load();