jQuery Add/Remove Input Fields

A script to add or remove a input field. With corrected line breaks.

by gadurp1

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<div class="container">
<br><br>
		<h2>Anniversary Dates</h2>
		<div class="card card-body">
			    <form action="" method="post" id="InputsWrapper" class="form-group">
        <div class="form-group">
            <div class="row">
                <div class="col-6">
                    <select name="mytext[]" id="type" class=" form-control">
                        <option value="">Birthday</option>
                        <option value="">Wedding</option>
                        <option value="Property">Property</option>
                        <option value="custom">Custom</option>
                    </select>
                    <input name="mytext[]" 
													 type="text" 
													 id="custom" 
													 placeholder="Custom Date Name" 
													 class="form-control"
										>
                </div>
                <div class="col-5">
                    <input type="date" name="anniversary_date[]" class="form-control">
                    <input type="text" 
													 id="description" 
													 class="form-control" 
													 name="description[]"
													 placeholder="Enter Address"
										>
                </div>
									<a href="#" class="removeclass">X</a>
            </div>
					
        </div>

    </form>
		<hr>
    <div class="row">
        <div id="AddMoreFileId" class="col">
            <a href="#" id="AddMoreFileBox" class=""> + Add Date</a>
        </div>
    </div>
		</div>
</div>

CSS

* { font-family:Arial; }
a { color:#999; text-decoration: none; }
a:hover { color:#802727; }

input { padding:5px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; }

.form-control {
	margin-bottom:5px
}

JavaScript

$(document).ready(function() {

    var MaxInputs = 10; //maximum extra input boxes allowed
    var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID
    var AddButton = $("#AddMoreFileBox"); //Add button ID

    var x = InputsWrapper.length; //initlal text box count
    var FieldCount = 1; //to keep track of text box added

    //on add input button click
    $(AddButton).click(function(e) {
        //max input box allowed
        if (x <= MaxInputs) {
            FieldCount++; //text box added ncrement
            //add input box
            $(InputsWrapper).append('<div class="row"><div class="col"><select name="mytext[]" id="type" class="form-control"><option value="">Birthday</option><option value="">Wedding</option><option value="">Property</option><option value="">Custom</option></select><input name="mytext[]" type="text" id="custom" placeholder="Custom Date Name" class="form-control"></div><div class="col"><input type="date" class="form-control" name="anniversary_date[]"><input type="text" id="description" name="description[]" class="form-control"></div><a href="#" class="removeclass">X</a></div></div><br>');
            x++; //text box increment

            $("#AddMoreFileId").show();

            $('AddMoreFileBox').html("Add field");

        }
        return false;
    });


    $("body").on("click", ".removeclass", function(e) { // user clicks remove
        if (x > 1) {
            $(this).parent('div').remove(); // remove date fields
            x--; //decrement date fields

            $("#AddMoreFileId").show();

            // Adds the "add" link again when a field is removed.
            $('AddMoreFileBox').html("Add field");
        }
        return false;
    })

    // Check if type is custom then show an input box instead of select
    $(function() {
        $('#custom').hide();
        $('#type').change(function() {
            if ($('#type').val() == 'custom') {
                $('#custom').show();
               ...