JSFiddle - React, Tailwind, and code Playground

by alexnasonov

HTML

<div id='button'>Button</div>
<div id='console'>
    <div>

CSS

#button {
    background-color:blue;
    display: inline-block;
    color: white;
    padding: 10px;
    cursor: pointer;
}

JavaScript

//I have an Object that describes my document.
//Each document contains layers, that described in Objects in an array
var example = {
    id: 'some_id',
    layers: [{
        id: 'some_layer_id',
        width: 100,
        height: 200
    }]
};

//There are different types of layers, each has it's template
var layer_templates = [{
    type: 'text',
    name: 'Текстовый блок',
    width: 100,
    height: 100,
    content: 'Текстовый блок',
    style: 'common'
}];

// Push the button!
jQuery('#button').on('click', function () {


    var ldata = layer_templates[0]; // get a template
    ldata['id'] = 's-l-' + Math.random().toString(); // create an id
    example['layers'].push(ldata); // add new "layer" to document
    console.log(example['layers']); // check

    // see duplicated Objects (their ids) if you don't bother with console
    jQuery('#console').html('');
    for (var c = 0; c < example['layers'].length; c++) {
        jQuery('#console').append('layer#' + c.toString() + ' id:' + example['layers'][c]['id'] + '<br>');
    }

});