JSFiddle - React, Tailwind, and code Playground

by Ehsan Sajjad

HTML

<div class="container">
<div class="contain_box">
    <a href="something">
        <img class="my_img" src="some_image" />
    </a>
    <div class="variants">
       <div class="var" rel="123" data="321"></div>
       <div class="var" rel="1234" data="4321"></div>
    </div>
</div>
<div class="contain_box">
    <a href="something">
        <img class="my_img" src="some_image" />
    </a>
    <div class="variants">
       <div class="var" rel="456" data="654"></div>
       <div class="var" rel="4567" data="7654"></div>
    </div>
</div>
<div class="contain_box">
    <a href="something">
        <img class="my_img" src="some_image" />
    </a>
    <div class="variants">
       <div class="var" rel="789" data="987"></div>
       <div class="var" rel="7890" data="0987"></div>
    </div>
</div>
</div>

CSS

#save {
    cursor: pointer;
    display: inline-block;
    margin: 10px 0;
    padding: 10px;
    color: #fff;
    background: #333;
}

JavaScript

$(document).on("click", '.my_img', function(e){
e.preventDefault();

data = undefined;
rel = undefined;

var new_rel = $('.var').attr('rel');
var new_data = $('.var').attr('data');
console.log(new_rel);
$(this).attr('rel', new_rel);
$(this).attr('data', new_data);
    

data = $(this).attr('variant');
rel = $(this).attr('rel');
    console.log(rel);
});