JSFiddle - React, Tailwind, and code Playground

by fallenreaper

HTML

<div class = "t2">
<div id = "win">This is a win to me.</div>
</div>
<div class = "t2">
<div id = "win">This is a win to me.</div>
</div>
<div class = "t2">
<div id = "win">This is a win to me.</div>
</div>
<div class = "t2">
<div id = "win">This is a win to me.</div>
</div>
<div class = "t2">
<div id = "win">This is a win to me.</div>
</div>
<div class = "t2">
<div id = "win">This is a win to me.</div>
</div>
<div class = "all">
</div>
<a href="#" >Count stuff</a>&nbsp;&nbsp;<span id = "text"></span>

CSS

div.t2{
 width:100px;
 height:100px;  
 background-color: Aqua;    
}

#win{
 width:inherit;
height:inherit;    
}

JavaScript

var $item = $();
$("a").click(function(){
   countStuff(); 
});


$("div.t2").click(function(){
    $item = $item.add(this);
    $(this).css("background-color","red");
});

$item.click(function(){
    alert(this);
    $(this).css("background-color","green");        
});


/*
$item.each(function(){
    alert(this);
    $(this).click(function(){
    
        $(this).css("background-color","green");        
    
    });
});
*/



function countStuff(){
    var x = $item.length;
    //alert(x);
    $("span#text").html(x);
}



/*
$("#win").css("background-color","Aqua");
var flag;

$("div.t2").click(function(){
flag = $(this).parent();
    $(".all").append($(this)).css({'width': $(window).width(), 'height': $(window).height(), 'background-color': 'red'}).draggable({stop: function(){ flag.css({'left': $(this).position.left, 'top': $(this).position.top});}}).append($(this).find("div.t2")).find("div.t2").css({'left':$(this).position.left, 'top':$(this).position.top});
});
*/
/*
$("div.t2").draggable({
    start: function(){
        //$(this).draggable("disable");
        //$(".all").draggable({start: function(){$(this).css({"left":"0px","top":"0px"});},stop: function(){ $(this).find("div").remove("div.t2");}}).append($(this).clone()).css("background-color","red");
        
    },
    drag: function(){
        
        
    },
    stop: function(){
        
    }});
*/