JSFiddle - React, Tailwind, and code Playground

by Douglas Crosby

HTML

<div class="whatever"></div>
<div id="whatever"></div>

CSS

div{
    padding:10px;
    border:1px dashed #222;
    margin:10px;
}
div div{
    padding:5px;
    border:1px dotted #555;
    margin:0px;
}

JavaScript

$('.whatever').html('<div class="pic"><img class="left" src="img/happy-man.jpg"/ ></div><div class="pic"><img class="happy" src="img/happy-woman.jpg"/ ></div><div class="pic"><img class="right" src="img/happy-celeb.jpg"/ ></div>');

var imgList = [
        ["img/happy-man.jpg","left"]
        ,["img/happy-woman.jpg","happy"]
        ,["img/happy-celeb.jpg","right"]
    ], cur=0,
    whatever = $('#whatever');
    whatever.html("");

$.each(imgList,function(){
    console.log(imgList[cur][1]);
    whatever
        .append( $("<div />")
                .addClass("pic")
                .html( $("<img />")
                      .addClass(imgList[cur][1])
                      .attr("src",imgList[cur][0])
                    )
              );
        cur++;
});