clone values to another table

by adrien boufflet

HTML

<div id="input1" class="HiddenInput" name="divtable">
    <table id="datatable" class="datatable_class">
        <tr>
            <td id="td01">td 01</td>
            <td id="td02" bgcolor="red"><input id="text1" value="td 02"></input></td>
        </tr>
        <tr>
            <td id="td03">td 03</td>
            <td id="td04" bgcolor="green"><input id="text2" value="td 04"></input></td>
        </tr>
        <tr>
            <td id="td05">td 05</td>
            <td id="td06" bgcolor="blue"><input id="text3" value="td 06"></input></td>
        </tr>
        <tr>
            <td id="td07">td 07</td>
            <td id="td08" bgcolor="orange"><input id="text4" value="td 08"></input></td>
        </tr>
        <tr>
            <td id="td09">td 09</td>
             <td id="td10" bgcolor="yellow"><input id="text5" value="td 10"></input></td>
        </tr>
        <tr>
            <td id="td21" bgcolor="grey">text 1</td>
            <td id="td22" bgcolor="grey">text 2</td>
        </tr>
    </table>
</div>

<div id="sticker1" class="HiddenSticker" name="sticker">
    <table id="sticker_table" class="sticker_class">
        <tr>
            <td id="td51"></td>
            <td id="td52"></td>
            <td id="td53"></td>
            <td id="td54"></td>
            <td id="td55"></td>
        </tr>
        <tr>
            <td id="td61"></td>
            <td id="td62"></td>
            <td id="td63"></td>
            <td id="td64"></td>
            <td id="td65"></td>
        </tr>
    </table>
</div>
<button id="add_button">add table</button>
<button id="sticker_button">Show Stickers</button>

CSS

#datatable {
    border-radius: 5px;
    border:1px solid;
    font-size:15px;
    color: FFF;
}
td {
    border-radius: 5px;
    border:1px solid;
    padding: 12px
}
div.HiddenInput {
    display: none;
}
.NewInputs {
    display: block;
}

div.HiddenSticker {
    display: none;
}
div.NewSticker {
    display: none;
}
.hidden_td {
    display: none;
}

JavaScript

$(document).ready(function () {
    $('#add_button').click(function () {
        var num = $('.datatable_class').length;// getting number of divs with this class
        var newNum = num + 1;// var with plus 1 to the last count of divs
        
        var newElem = $('#input1').clone().attr('id', 'input' + newNum).removeClass('HiddenInput').addClass('.NewInputs').fadeIn(1000);//cloning div and removing the hidden class. adding a visible class
        
        newElem.find('td').attr('id', function () { // finding all td's in this div and assigning new ids
            return this.id + '_' + newNum
        });
        newElem.find('input').attr('id', function () {// finding all inputs in this div and assigning new ids
            return this.id + '_' + newNum
        });
        
        $('#input' + num).after(newElem);// creating new cloned div and placing after previosly copied div
        
        var Snum = $('.sticker_class').length;// preparing as done above but for the sticker table
        var SnewNum = Snum + 1;
        var SnewElem = $('#sticker1').clone().attr('id', 'sticker' + SnewNum).removeClass('HiddenSticker').addClass('NewSticker');
        SnewElem.find('td').attr('id', function () {
            return this.id + '_' + SnewNum
        });
        $('#sticker' + Snum).after(SnewElem);
    });
});


$('#sticker_button').click(function () {// button to hide tables and show sticker tables
    $("div[name^='divtable']").hide();
    $("div[class^='NewSticker']").show();
});