JSFiddle - React, Tailwind, and code Playground

by Alex Chizhov

HTML

<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<div class="rbEduPlacesBlock">
    <div class="rbEduAddedPlace">
        <div><span>Дата окончания</span>

            <select name="rbeduendmonth[1]">
                <option></option>
            </select>
            <select name="rbeduendyear[1]">
                <option></option>
            </select>
        </div>
        <div>
            <label for="rbeduplace1">Место учебы</label>
            <input type="text" name="rbeduplace[1]" id="rbeduplace1" placeholder="$rbeduplace[1]">
        </div>
        <div>
            <label for="rbedusubject1">Факультет, квалификация, специальность</label>
            <input type="text" name="rbedusubject[1]" id="rbedusubject1" placeholder="$rbedusubject[1]">
        </div>
    </div>
    <!-- rbEduAddedPlace -->
</div>
<!-- rbEduPlacesBlock -->
<div class="rbEduPlaceAddButton"><a href="javascript://" id="addEduPlace">Добавить место учебы</a>
</div>

CSS

a#addEduPlace {
    padding: 10px 10px 10px 30px;
    background: lightgreen url(http://ibchrdev.pineapple-design.ru/forms2/resumebuilder20/img/iconaddblock.png) no-repeat 10px center;
    display: inline-block;
    margin: 5px 0;
    text-decoration: none;
    font: 10pt arial, helvetica, sans-serif;
    border-radius: 7px;
    color: #000;
    transition: .2s;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
a#addEduPlace:hover {
    background-color: orange;
    color: #fff;
}
.rbEduAddedPlace {
    width: 100%;
    display: block;
    background-color: #eee;
    margin: 10px 0;
    padding: 10px 10px 5px 10px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.rbEduAddedPlace span, .rbEduAddedPlace label {
    width: 325px;
    display: inline-block;
}
.rbEduAddedPlace input[type=text] {
    width: 250px;
    height: 30px;
    margin-bottom: 5px;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 4px;
    padding: 5px 6px;
}
.rbEduAddedPlace select {
    width: 122px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin: 0 6px 5px 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.rbEduAddedPlace:after {
    display: block;
    content:'';
    clear: both;
}
#deleteEduPlace {
    width: 16px;
    height: 16px;
    display: inline-block;
    background: transparent url(http://ibchrdev.pineapple-design.ru/forms2/resumebuilder20//img/icondeleteblock.png) no-repeat;
    position: relative;
    float: right;
}

JavaScript

// Add / Delete education places
var eduBlock = $('.rbEduPlacesBlock');
var countEduPlace = $('div.rbEduPlacesBlock div.rbEduAddedPlace').size() + 1;
$('#addEduPlace').live('click', function () {

    $('<div class="rbEduAddedPlace"><a href="javascript://" id="deleteEduPlace"></a><div><span>Дата окончания</span><select name="rbeduendmonth[' + countEduPlace + ']" id="rbeduendmonth' + countEduPlace + '"><option value="январь">январь</option><option value="февраль">февраль</option><option value="март">март</option><option value="апрель">апрель</option><option value="май">май</option><option value="июнь">июнь</option><option value="июль">июль</option><option value="август">август</option><option value="сентябрь">сентябрь</option><option value="октябрь">октябрь</option><option value="ноябрь">ноябрь</option><option value="декабрь">декабрь</option></select><select name="rbeduendyear[' + countEduPlace + ']" id="rbeduendyear' + countEduPlace + '"><option value="1924">1924</option><option value="1925">1925</option><option value="1926">1926</option><option value="1927">1927</option><option value="1928">1928</option><option value="1929">1929</option><option value="1930">1930</option><option value="1931">1931</option><option value="1932">1932</option><option value="1933">1933</option><option value="1934">1934</option><option value="1935">1935</option><option value="1936">1936</option><option value="1937">1937</option><option value="1938">1938</option><option value="1939">1939</option><option value="1940">1940</option><option value="1941">1941</option><option value="1942">1942</option><option value="1943">1943</option><option value="1944">1944</option><option value="1945">1945</option><option value="1946">1946</option><option value="1947">1947</option><option value="1948">1948</option><option value="1949">1949</option><option value="1950">1950</option><option value="1951">1951</option><option value="1952">1952</option><option value="1953">1953</option><option...