JSFiddle - React, Tailwind, and code Playground

by alexseroshtan

HTML

<ul>
    <li data-pk="1">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
    </li>
    <li data-pk="2">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
    </li>
    <li data-pk="3">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
    </li>
</ul>

CSS

li {
    float: left;
    list-style: none;
    margin: 20px;
}
.a, .b, .c {
    width: 20px;
    height: 20px;
}

JavaScript

var tpl = {
    'a': ['a', 'red'],
    'b': ['b', 'green'],
    'c': ['c', 'blue']
};

$('li').each(function() {
    var pk = $(this).data('pk');
    var tpl_copy = $.extend({}, tpl); // не пашет
    // var tpl_copy = JSON.parse(JSON.stringify(tpl)); // пашет

    if (pk == 2) {
        tpl_copy['b'][1] = 'black';
    }

    $(this).find('.a').css('background', tpl_copy['a'][1]);
    $(this).find('.b').css('background', tpl_copy['b'][1]);
    $(this).find('.c').css('background', tpl_copy['c'][1]);
});