JSFiddle - React, Tailwind, and code Playground

by moeishaa

HTML

<a class="link_to_rule_them_all" href="#">
    <span class="one two three">
        Goal is to copy all the classes in this span element into the '#box' div by the click of '.link_to_rule_them_all' link that surrounds it
    </span>    
</a> 

<a class="link_to_rule_them_all" href="#">
    <span class="three four">
        Goal is to copy all the classes in this span element into the '#box' div by the click of '.link_to_rule_them_all' link that surrounds it
    </span>    
</a>

<div id="box">#box div</div>

CSS

span, div { clear: both; margin-bottom: 30px; float: left; text-decoration: none; color: black; padding: 15px; }


.one { font-size: 20px; }
.two { color: green; }
.three { border: 2px solid #e1e1e1; }
.four{ color: red; }

JavaScript

$('.link_to_rule_them_all').bind('click', function(e) {
    e.preventDefault();
    $('#box').attr('class', ($('span', $(this)).attr('class')));
});