JSFiddle - React, Tailwind, and code Playground

HTML

<div class="form-group">
			<div class="col-md-12">
				<label class="control-label" for="num_periods">Num periods</label>
				<select id="num_periods" name="num_periods" class="form-control">
					<option value="2"> 2</option>
					<option value="3"> 3</option>
					<option value="4"> 4</option>
					<option value="5"> 5</option>
					<option value="6"> 6</option>
					<option value="7"> 7</option>			
				</select>		
			</div>
		</div>

<div id="outer_div">
    <div class="period">
        <div id="regulation">
            <div class="form-group initial_clone_div">
                	<h3 class="period_title">Period 1</h3>

                <div class="col-md-4">
                    <label class="control-label" for="blue_team">Blue Team</label>
                    <input class="form-control" type="text" name="blue_team[]" id="blue_team_period_1" />
                </div>
                <div class="col-md-4">
                    <label class="control-label" for="grey_team">Grey team</label>
                    <input class="form-control" type="text" name="grey_team[]" id="grey_team_period_1" />
                </div>
                <div class="col-md-4">
                    <label class="control-label" for="black_team">Balck team</label>
                    <input class="form-control" type="text" name="black_team[]" id="black_team_period_1" />
                </div>
            </div>
        </div>
        <div id="overtime"></div>	<a href="#" class="overtime_add_button">Add OT</a>

    </div>
</div>

JavaScript

var ot_div = "<div class='form-group overtime'>" +
    "<div class='col-md-4'>" +
    "<label class='control-label' for='blue_team_ot'>Blue team</label>" +
    "<input class='form-control' type='text' name='blue_team_ot[]'/>	" +
    "</div>" +
    "<div class='col-md-4'>" +
    "<label class='control-label' for='grey_team_ot'>Grey team</label>" +
    "<input class='form-control' type='text' name='grey_team_ot[]'/>	" +
    "</div>" +
    "<div class='col-md-4'>" +
    "<label class='control-label' for='black_team_ot'>Black team</label>" +
    "<input class='form-control' type='text' name='black_team_ot[]'/>	" +
    "</div>" +
    "</div>";

function cloneDiv(div, times) {
    for (var j = 1; j <= times; 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);
        });

        $('.period_title:last').html('Period ' + j);
        $('.period:last').attr('id', 'period_' + j);
        $('.overtime_add_button:last').attr('id', 'ot_button_period_' + j);
    }
}

function clearOTS() {
    $('.period').each(function (i) {
        $(this).find('#overtime').html('');
    });
}

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

$('#num_periods').change(function () {
    $div = $('.period:first');
    clearOTS();
    clearClones();
    cloneDiv($div, $(this).val());
});

$(document).ready(function () {
    $div = $('.period:first');
    clearClones();
    cloneDiv($div, $('#num_periods').val());


    $('a.overtime_add_button').click(function (event) {
        var id = $(this).attr('id');
        var id_split = id.split("_");
        var period_num = id_split[3];

       ...