Cloned Input - Doesn't Work

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="form-group row">
    <label class="col-3">Days <span class="text-danger">*</span></label>
    <label class="col-9">Times</label>
</div>
<div class="form-group row">
    <!--<label class="col-lg-2 col-form-label mt-10">Step</label>-->

    <div class="col-lg-3">
        <div class="custom-control custom-checkbox mb-20">
            <input class="custom-control-input" type="checkbox" id="monday" name="days[]" value="monday">
            <label class="custom-control-label" for="monday">Monday</label>
        </div>
    </div>
    <div class="col-lg-5 time-interval">
        <div class="row">
            <div class="col-lg-5">
                <select class="form-control form-control-lg" name="from_hours[monday][]">

                    <option value="0">12 AM</option>

                    <option value="1"> 1 AM</option>

                    <option value="2"> 2 AM</option>

                    <option value="3"> 3 AM</option>

                    <option value="4"> 4 AM</option>

                    <option value="5"> 5 AM</option>

                    <option value="6"> 6 AM</option>

                    <option value="7"> 7 AM</option>

                    <option value="8"> 8 AM</option>

                    <option value="9" selected> 9 AM</option>

                    <option value="10">10 AM</option>

                    <option value="11">11 AM</option>

                    <option value="12">12 PM</option>

                    <option value="13"> 1 PM</option>

                    <option...

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

JavaScript

var regex = /^(.+?)(\d+)$/i;
var cloneIndex = $(".time-interval").length;
function clone(){
var $closestTimeInterval = $(this).closest(".actions").siblings(".time-interval").first();
    $closestTimeInterval.clone()
        .insertAfter($closestTimeInterval).attr("id", "time-interval" +  cloneIndex)
        .find("*")
        .each(function() {
            var id = this.id || "";
            var match = id.match(regex) || [];
            if (match.length == 3) {
                this.id = match[1] + (cloneIndex);
            }
        });
    cloneIndex++;
}
function remove(){
    $(this).parents(".time-interval").remove();
}
$(".add-interval").on("click", clone);

$(".remove-interval").on("click", remove);