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="rbChildren">
    <div><span class="rbLabelLike">Children</span>

        <label for="resumeChildYes">Yes</label>
        <input type="radio" name="resumekids" id="resumeChildYes" value="Yes">
        <label for="resumeChildNo">No</label>
        <input type="radio" name="resumekids" id="resumeChildNo" value="No">
    </div>
    <div class="rbChildrenAddBlock">
        <div class="rbChildrenAdd">
            <div class="rbChildrenRow">
                <label for="rbchildyear1">Birth Year</label>
                <input type="text" name="rbchildyear[1]" id="rbchildyear1" placeholder="$rbchildyear[1]">
            </div>
        </div>
        <!-- rbChildrenAdd -->
        <div class="rbChildrenAddButton"> <a href="javascript://" id="addChild">Add a child</a>

        </div>
        <!-- rbChildrenAddButton -->
    </div>
    <!-- rbChildrenAddBlock -->
</div>
<!-- rbChildren -->

CSS

/* Children block */
 .rbChildren {
    margin-top: 10px;
}
.rbChildrenAdd {
    margin-top: 10px;
}
.rbChildrenAddBlock {
    display:none;
}
.rbChildrenRow input[type=text] {
    border-radius: 4px;
    width: 140px;
    height: 30px;
    border: 1px solid #ccc;
    background-color: #fff;
    margin: 5px 4px 5px 8px;
    text-align: center;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
a#deleteChild {
    width: 16px;
    height: 16px;
    display: inline-block;
    background: transparent url(http://ibchrdev.pineapple-design.ru/forms2/resumebuilder20/img/icondeleteblock.png) no-repeat;
    vertical-align: middle;
}

JavaScript

jQuery(function ($) {

    // Hide fields by default
    $('.rbChildrenAddBlock').hide();
    $('#addChild').hide();

    // Check if user has kids or not
    $('#resumeChildYes').change(function () {
        if ($(this).is(':checked')) {
            $('.rbChildrenAddBlock').show();
            $('#addChild').show();
        } else {
            $('.rbChildrenAddBlock').hide();
            $('#addChild').hide();
        }
    });
    $('#resumeChildNo').change(function () {
        if ($(this).is(':checked')) {
            $('.rbChildrenAddBlock').hide();
            $('#addChild').hide();
        } else {
            $('.rbChildrenAddBlock').show();
            $('#addChild').show();
        }
    });

    // Add children input fields
    var childBlock = $('.rbChildrenAdd');
    var countChildren = $('div.rbChildrenAdd div.rbChildrenRow').size() + 1;
    $('#addChild').live('click', function (e) {
        e.preventDefault;
        $('<div class="rbChildrenRow"><label for="rbchildyear' + countChildren + '">Birth Year</label><input type="text" name="rbchildyear[' + countChildren + ']" id="rbchildyear' + countChildren + '" placeholder="$rbchildyear[' + countChildren + ']"><a href="javascript://" id="deleteChild" title="Delete"></a></div>').appendTo(childBlock);
        countChildren++;
    });
    $('#deleteChild').live('click', function (e) {
        e.preventDefault();
        if (countChildren > 2) {
            $(this).parents('div.rbChildrenRow').remove();
            countChildren--;
            var counter = 1;
            $('input[name^="rbchildyear"]').each(function () {
                $(this).attr('name', 'rbchildyear[' + counter + ']');
                $(this).attr('placeholder', '$rbchildyear[' + counter + ']');
                $(this).attr('id', 'rbchildyear' + counter);
                counter++;
            });
            var counter = 1;
            $('label[for^="rbchildyear"]').each(function () {
                $(this).attr('for',...