Put 4 elements per div dynamically

by SamsChoice

HTML

<div id="appendHere"></div>

JavaScript

var theImages = {
	"image1":"http://placekitten.com/g/100/100",
	"image2":"http://placekitten.com/g/100/100",
	"image3":"http://placekitten.com/g/100/100",
	"image4":"http://placekitten.com/g/100/100",
	"image5":"http://placekitten.com/g/100/100",
	"image6":"http://placekitten.com/g/100/100",
	"image7":"http://placekitten.com/g/100/100",
	"image8":"http://placekitten.com/g/100/100",
	"image9":"http://placekitten.com/g/100/100",
	"image10":"http://placekitten.com/g/100/100"
};

            var $theDIV = $("<div/>", {
				'class': 'theDiv'
			});
			var $theWrapper = $("<div/>", {
				'class': 'theWrapper'
			});
			var howmany = 4;
			var current = 0;

			for (var key in theImages) {

					var $Img = $('<img/>');
					var $ImgA = $('<a/>');
				if (current === 0 || current % 4 === 0)
				{//if it’s first or first in sequence
					var $theitem= $('<div/>', {'class': 'item'});
					/*cleart it and restarts*/
				}

				$theitem.append($Img.addClass("puzzleImage").attr("src",theImages[key]).attr("data-puzzle",key))

				$theWrapper.append($theitem);
					//
					current += 1;

			}
			$("#appendHere").append($theDIV.append($theWrapper));