How to validate dynamically generated fields with bootstrap validator. `Error Cannot read property 'apply' of undefined` - bootstrapvalidator

Question

I have my form here that contains the fields that i want validated. Currently there is one Name of Recipient field but the user can click the addKit button which will dynamically generate new input fields for the user to fill out. The validation library i am using validates the fields by matching the input field name to the bootstrapValidator fields list. In this case for instance, it will look at <input type="text" style="margin:0px 0px 7.5px 0px;" class="form-control" name="kits[COZ1][1][name]" value=""> and match the name kits[COZ1][1][name] to the field name in the fields list in the javascript. Now as there are more inputs generated the name will change dynamically, the next input name will be kits[COZ1][2][name] and so on... I am using the addField method to add the field dynamically but run into an error. What am i doing wrong here?
<form class="well form-horizontal" action="" method="post" id="order">
<fieldset>
<legend><b>Requestor</b></legend>
<div class="form-group">
<label class="col-md-4 control-label">Requestor Name</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="requestorName" placeholder="Requestor Name" class="form-control" id="requestorName" type="text" required>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Requestor Email</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input name="requestorEmail" placeholder="Requestor Email" class="form-control" id="requestorEmail" type="text" required>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Requestor Broker Dealer</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="firm" placeholder="Firm Name" class="form-control" id="firm" type="text" required>
</div>
</div>
</div>
<legend><b>Kit Details</b></legend>
<?php foreach($kit_types as $type => $description): ?>
<div class="form-group">
<label class="col-md-4 control-label"><?php echo $description; ?></label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-file"></i></span>
<input class="form-control" size="10" value="1" placeholder="Quantity" name="quantity_<?php echo $type; ?>" id="quantity_<?php echo $type; ?>" type="text" required />
</div>
<div class="invalid-feedback">
Please enter the Quantity of Kits Needed
</div>
<button style="margin:15px 15px 0px 0px;" class="kitQuantityUpdate btn btn-primary btn-sm" id="update_<?php echo $type; ?>" type="button" value="Show" />Show <span class="glyphicon glyphicon-refresh"></span></button>
<button style="margin:15px 15px 0px 0px;" class="kitAdd btn btn-warning btn-sm" id="add_<?php echo $type; ?>" type="button" value="Add Kit" />Add Kit <span class="glyphicon glyphicon-plus-sign"></span></button>
</div>
<div class="kitDetail" id="kitDetail_<?php echo $type; ?>">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Name of Recipient</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<div id="kitList">
<div class="detailList" id="detail_<?php echo $type; ?>">
<input type="text" style="margin:0px 0px 7.5px 0px;" class="form-control" name="kits[COZ1][1][name]" value="">
</div>
</div>
</div></div>
</div>
<?php endforeach; ?>
<!--<legend><b>Kit Delivery</b></legend>-->
<div class="form-group" style="visibility: hidden">
<label class="col-md-4 control-label">Delivery Method</label>
<div class="col-md-4 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<select id="mailtype" name="mailtype" class="form-control selectpicker" >
<option value="Email" selected>Email</option>
<!-- <option value="Hard Copy">Hard Copy</option>
<option value="Hard Copy & Email">Hard Copy & Email</option>-->
</select>
</div>
</div>
</div>
<!-- Success message -->
<div class="alert alert-success" role="alert" id="success_message">Success <i class="glyphicon glyphicon-thumbs-up"></i> Thanks for placing your Order, we will contact you shortly.</div>
<button id="submit" name="submit" type="submit" class="btn btn-success" >Submit Order <span class="glyphicon glyphicon-send"></span></button>
<!--<input id="submit" type="submit" name="submit" value="Submit Order" />-->
</fieldset>
</form>
I have a my validation rules set.
$('#order').bootstrapValidator({
// To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
submitHandler: function(validator, form, submitButton) {
$('#success_message').slideDown({ opacity: "show" }, "slow") // Do something ...
var bv = form.data('bootstrapValidator');
// Use Ajax to submit form data
$.post(form.attr('action'), form.serialize(), function(result) {
$('#order').bootstrapValidator("resetForm",true);
console.log(result);
}, 'json');
},
excluded: [':disabled'],
fields: {
kits[COZ1][1][name]: {
validators: {
stringLength: {
min: 2,
},
notEmpty: {
message: 'Please supply recipient name'
}
}
},
requestorName: {
validators: {
stringLength: {
min: 2,
},
notEmpty: {
message: 'Please supply your name'
}
}
},
requestorEmail: {
validators: {
notEmpty: {
message: 'Please supply your email address'
},
emailAddress: {
message: 'Please supply a valid email address'
}
}
},
firm: {
validators: {
stringLength: {
min: 3,
},
notEmpty: {
message: 'Please supply your Broker Dealer'
}
}
},
/*
address1: {
validators: {
stringLength: {
min: 8,
},
notEmpty: {
message: 'Please supply recipient street address'
}
}
},
address2: {
validators: {
stringLength: {
min: 8,
},
notEmpty: {
message: 'Please supply your street address'
}
}
},
city: {
validators: {
stringLength: {
min: 4,
},
notEmpty: {
message: 'Please supply recipient city'
}
}
},
state: {
validators: {
notEmpty: {
message: 'Please select recipient state'
}
}
},
zip: {
validators: {
notEmpty: {
message: 'Please supply recipient zip code'
},
zipCode: {
country: 'US',
message: 'Please supply a vaild zip code'
}
}
},
phone: {
validators: {
notEmpty: {
message: 'Please supply recipient phone number'
},
phone: {
country: 'US',
message: 'Please supply a vaild phone number with area code'
}
}
},
ship_email: {
validators: {
notEmpty: {
message: 'Please supply recipient address'
},
emailAddress: {
message: 'Please supply a valid email address'
}
}
},
*/
}
}).on('click', '.kitAdd',function() {
var data = kitAdd($(this).attr("id").split("_")[1]);
console.log(data);
var prefix = data[0];
var suffix = data[1];
var type = data[2];
var template = $("#detail_"+type);
var clone = template.clone();
clone.attr('id', "detail_"+type);
// clone.insertBefore(template);
var option = clone.find('input');
var name = prefix + "[name]";
option.attr('name', prefix + "[name]");
var obj = clone.find('[name="'+suffix+'[name]"]')
$("form#order").bootstrapValidator("addField", obj);
});
kitAdd function simply returns data needed for input name.