JSFiddle - React, Tailwind, and code Playground

by Norlihazmey Ghazali

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdn.rawgit.com/metallurgical/jquery-metal-clone/master/jquery.metalClone.js"></script>
<div class="container">
    <div class="spar-cadre descriptions">
        <div class="toClone">
            <div class="control-group" id="fields">
                <div class="controls">
                    <form role="form" autocomplete="off">
                        <div class="entry input-group col-md-12">
                            <input class="form-control" name="fields[]" type="text" placeholder="description todo" value="">
                            <!-- <textarea class="form-control" rows="3"></textarea> -->
                            <span class="input-group-btn">
                                      <select class="btn">
                                          <option selected="">Language</option>
                                          <option value="FR">FR</option>
                                          <option value="EN">EN</option>
                                          <option value="ES">ES</option>
                                          <option value="IT">IT</option>
                                          <option value="DE">DE</option>
                                      </select>
                                    </span>
                            <span class="input-group-btn">
                                            <button class="btn btn-default btn-duplicate" type="button" data-toggle="tooltip" data-placement="top" title="Dupliquer une description">
                                                <span class="glyphicon glyphicon-duplicate"></span>
                            </button>
                            </span>
                            <span class="input-group-btn">
                                            <button class="btn btn-default btn-down" type="button" data-toggle="tooltip"...

CSS

/*global*/

body {
    /*min-height: 2000px;*/
    padding-top: 70px;
    padding-bottom: 200px;
}

.spar-cadre {
    position: relative;
    padding: 45px 15px 15px;
    margin: 0 -15px 15px;
    border-style: solid;
    margin-right: 0;
    margin-left: 0;
    background-color: rgba(138, 109, 59, 0.1);
    border-color: rgba(221, 221, 221, 0.7);
    border-width: 1px;
    border-radius: 0;
    box-shadow: none;
}

.spar-cadre.no-title {
    padding-top: 15px;
}

.modal-header .breadcrumb {
    background-color: transparent;
    margin-bottom: 0px;
}

.navbar-right .glyphicon {
    font-size: 1.5em
}

.page-header {
    margin: 10px 0 20px;
}

.footer {
    background-color: #f8f8f8;
    border-color: #e7e7e7;
    padding: 10px;
}

.pager {
    margin: 5px 0;
}

.pager li>a,
.pager li>span {
    padding: 10px 20px;
    border-radius: 0px;
}

.navbar-nav>li>a {
    text-transform: uppercase;
    font-size: 0.8em;
}

.panel-heading a:after {
    font-family: 'Glyphicons Halflings';
    content: "\e114";
    float: right;
    color: grey;
}

.panel-heading a.collapsed:after {
    content: "\e080";
}

.breadcrumb {
    /*margin-bottom: 0px;*/
    background-color: #d9edf7;
}

.alert-info {
    margin-top: -20px;
}

.btn option {
    text-align: left
}

.fixed-table-container {
    height: 346px !important;
    min-height: 346px !important;
    padding-bottom: 40px !important;
}

.vertical-center {
    min-height: 100%;
    /* Fallback for vh unit */
    min-height: 100vh;
    /* You might also want to use
                        'height' property instead.

                        Note that for percentage values of
                        'height' or 'min-height' properties,
                        the 'height' of the parent element
                        should be specified explicitly.

                        In this case the parent of '.vertical-center'
                        is the <body> element */
    /* Make it a flex container */
    display: -webkit-box;
 ...

JavaScript

$('.toClone').metalClone({
    btnClone: '.btn-duplicate',
    ids: ["[div*=fields"],
    copyValue : true
});