JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<div id="gamesdiv">
    <div id="duplicator">
        <table>
            <tr>
                <td>type</td>
                <td>
                    <textarea ID="gamestype" runat="server" Height="16px" Width="92px"></textarea>
                </td>
                <td>name of game:</td>
                <td>
                    <textarea ID="namegame" runat="server" Height="17px" Width="118px"></textarea>
                </td>
            </tr>
        </table>
    </div>
</div>
<div id="gamesdesc">
    <textarea ID="gamestype" runat="server" Height="16px" Width="92px"></textarea>
</div>
<button id="button">Click</button>

CSS

#education {
    height: 140px;
    width: 741px;
    position: relative;
    /*z-index: 200;*/
}
#gamesdiv {
    background-color: #ffffff;
    border: 1px solid #d8d8d8;
    height: auto;
    width: 510px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    float: left;
    /*position: fixed;*/
}
#gamesdesc {
    background-color: #ffffff;
    border: 1px solid #d8d8d8;
    width: 510px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    float: left;
    /*position: fixed;*/
}

JavaScript

document.getElementById('button').onclick = duplicate;

var i = 0;
var original = document.getElementById('duplicator');

function duplicate() {
    var clone = original.cloneNode(true);
    clone.id = "gamesdiv" + ++i;
    original.parentNode.appendChild(clone);
}