JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<div class="rbTrainingPlacesBlock">
<div class="rbTrainingAddedPlace">
<div><span>Дата окончания</span>
</div>
<div>
<label for="rbtrainingplace1">Место учебы</label>
<input type="text" name="rbtrainingplace[1]" id="rbtrainingplace1" placeholder="$rbtrainingplace[1]">
</div>
<div>
<label for="rbtrainingsubject1">Название тренинга, курса</label>
<input type="text" name="rbtrainingsubject[1]" id="rbtrainingsubject1" placeholder="$rbtrainingsubject[1]">
</div>
</div>
<!-- rbEduAddedPlace -->
</div>
<!-- rbEduPlacesBlock -->
<div class="rbTrainingPlaceAddButton"><a href="javascript://" id="addTrainingPlace">Добавить тренинг, курс</a>
</div>
CSS
a#addTrainingPlace {
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#addTrainingPlace:hover {
background-color: orange;
color: #fff;
}
.rbTrainingAddedPlace {
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;
}
.rbTrainingAddedPlace span, .rbTrainingAddedPlace label {
width: 325px;
display: inline-block;
}
.rbTrainingAddedPlace input[type=text] {
width: 250px;
height: 30px;
margin-bottom: 5px;
border: 1px solid #ccc;
background-color: #fff;
border-radius: 4px;
padding: 5px 6px;
}
.rbTrainingAddedPlace 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;
}
.rbTrainingAddedPlace:after {
display: block;
content:'';
clear: both;
}
#deleteTrainingPlace {
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;
}
.rbTrainingPlaceAddButton {
padding-bottom: 15px;
margin-bottom: 15px;
border-bottom: 1px dashed #ccc;
}
JavaScript
// Add / delete trainings
var trainingBlock = $('.rbTrainingPlacesBlock');
var countTraining = $('div.rbTrainingPlacesBlock div.rbTrainingAddedPlace').size() + 1;
$('#addTrainingPlace').live('click', function () {
$('<div class="rbTrainingAddedPlace"><a href="javascript://" id="deleteTrainingPlace"></a><div><label for="rbtrainingplace' + countTraining + '">Место учебы</label><input type="text" name="rbtrainingplace[' + countTraining + ']" id="rbtrainingplace' + countTraining + '" placeholder="$rbtrainingplace[' + countTraining + ']"></div><div><label for="rbtrainingsubject' + countTraining + '">Факультет, квалификация, специальность</label><input type="text" name="rbtrainingsubject[' + countTraining + ']" id="rbtrainingsubject' + countTraining + '" placeholder="$rbtrainingsubject[' + countTraining + ']"></div></div>').appendTo(trainingBlock);
countTraining++;
return false;
});
$('#deleteTrainingPlace').live('click', function () {
if (countTraining > 2) {
$(this).parents('div.rbTrainingAddedPlace').remove();
countTraining--;
var counter=1;
$('input[name^="rbtrainingplace"]').each(function(){
$(this).attr('name','rbtrainingplace['+counter+']');
$(this).attr('placeholder','rbtrainingplace['+counter+']');
counter++;
});
}
return false;
});