JSFiddle - React, Tailwind, and code Playground

by karan3112

HTML

<div id="main_container"></div>

CSS

#main_container
{
    position:absolute;
    width:200px;
    height:200px;
    border:1px solid red;
}
.add1
{
    position:absolute;
    width:25px;
    height:25px;
    border:1px solid;
    left:50px;
    top:50px;
     cursor:pointer;
}
.add2
{
    position:absolute;
    width:25px;
    height:25px;
    border:1px solid;
    left:150px;
    top:50px;
    cursor:pointer;
}

JavaScript

var $main_img1 = $("<div/>").addClass('add1 add').appendTo($('#main_container'));
var $main_img2 = $("<div/>").addClass('add2 add').appendTo($('#main_container'));

      $main_img1.click(function()
                 {
                   get_id($(this))
                 });

       $main_img2.click(function()
                 {
                    get_id($(this))
                 });
function get_id(event)
{
    var temp = '$main_img' + (parseInt($('.add').index(event)) + 1);
    alert(temp);
    console.log(eval(temp));
    console.log($main_img1);
}