Clone divs with option of drop down menu Jquery

Question

I have 1 select box which has numbers as options. I have 3 input text boxes inside a div.

When the user selects a number in the select box, I would like to duplicate that div depending on the number of the select box...

Important part is that, the ID and the name of each text box has to increment, so something like this:

text_box_first_1, text_box_second_2, text_box_thrid_3
text_box_first_2, text_box_second_2, text_box_thrid_2

EDIT: Sorry, forgot to post what I got:

      <script>
    function clone(){
        var $newdiv = $('.initial_clone_div:first').clone();
        $('#add_clones_here').append($newdiv);
    }

    $('#num_periods').change(function () {
        for(var counter = 0; counter < $(this).val()-1; counter++) {
            $('.period_title').html('Period ' +(counter+1));
            clone();
        }
    });


</script>

 <!-- Period scores -->
    <div class="form-group initial_clone_div">
        <h3 class="period_title" id="period_title_1">Period 1</h3>
        <div class="col-md-4">
            <label class="control-label" for="num_periods">{{{ Lang::get('admin/teams/terms.blue_team') }}}</label>
            <input class="form-control" type="text" name="blue_team_period_1" id="blue_team_period_1" />    
        </div>
        <div class="col-md-4">
            <label class="control-label" for="num_periods">{{{ Lang::get('admin/teams/terms.grey_team') }}}</label>
            <input class="form-control" type="text" name="grey_team_period_1" id="grey_team_period_1" />    
        </div>
        <div class="col-md-4">
            <label class="control-label" for="num_periods">{{{ Lang::get('admin/teams/terms.black_team') }}}</label>
            <input class="form-control" type="text" name="black_team_period_1" id="black_team_period_1" />  
        </div>
    </div>
    <!-- ./ Period scores -->   

    <div id="add_clones_here">

    </div>

I don't know how to modify the id's and name's of the text boxes. I also got a problem showing the right Period number (the h3 tag)

EDIT: SOLUTION:

    function clearClones(){
        $('.initial_clone_div').each(function (i) {
            $(this).remove();
        });
    }

    $('#num_periods').change(function () {
        $div =  $('.initial_clone_div:first');
        clearClones();
        for (var j = 1; j <= $('#num_periods').val(); j++) {
            $div.clone()
                .appendTo('#outer_div')
                .find('input')
                .each(function (k, v) {
                    if(k+1 == 1)
                        var team = "blue";
                    else if(k+1 == 2)
                        var team = "grey";
                    else if(k+1 == 3)
                        var team = "black";

                var theId = team+ 'team_period_' + (j);
                $(v).attr('id', theId);
                $(v).attr('placeholder', theId);
            });
        }
    });

Answer 1

I created a fiddle (LINK) that should be easy to follow on how to do this.

HTML

<select id="select"></select>
<div id="outerDiv">
    <div id="theDiv">
        <input type="text" />
        <input type="text" />
        <input type="text" />
    </div>
</div>

JS

// Create dropdown
for (var i = 0; i < 11; i++) {
    $('#select').append('<option value="' + i + '">Clone ' + i + ' Times</option>');
}

// Do main procedure
var inc=1;

$('#select').change(function () {
    inc++
    for (var j = 0; j <= $('#select').val(); j++) {
        $('#theDiv').clone()
            .appendTo('#outerDiv')
            .find('input')
            .each(function (k, v) {
            var theId = 'input_' +inc+ '_' + (j + 1) + '_' + (k + 1);
            $(v).attr('id', theId);
            $(v).attr('placeholder', theId);
        });
    }
});

Answer 2

1) Get the id of the element that is going to be cloned. Since you want to increment only the number, you have to split based on the _

var sp = $('.initial_clone_div:first').prop('id').split('_');

2) Convert the the last index of sp array to number and increment it. Then again convert back to string dataType.

sp[3] = (+sp[3]+1).toString();

3) Now join and set the newId to the cloned element.

4) .clone( [withDataAndEvents ] [, deepWithDataAndEvents ] )

var newId = sp.join('_');
var $newdiv = $('.initial_clone_div:first').clone(true, true).prop('id', newId);