I'm currently working on a project where users can select elements from one box and they will show up in the next box. The issue I'm facing is when I click on a shortlisted element, it doesn't behave as expected.
Below is the code snippet:
HTML:
<div id="secondbox">
<div class="elements">
Soni
</div>
<div class="elements">
Soni1
</div>
<div class="elements">
Soni2
</div>
<div class="elements">
Soni3
</div>
</div>
JQ:
$(".pink").click(function()
{
//$(this).remove();
alert("Hi");
});
$(".elements").click(function()
{
if($(this).attr("class")=="elements")
{
$(this).clone().appendTo("#firstbox").addClass("pink");
$(this).addClass("red");
}
});
CSS:
#secondbox,#firstbox{float:left;height:300px;width:300px;border:1px solid black;}
.elements{width:90%;margin:5px;border:1px dashed orange;}
.red{background-color:#d5d5d5;}
.pink{background-color:#BCED91;}
Please assist in resolving this issue.