I need help to disable the 'Add Friend' tab after the 3rd tabs entry. I've no idea how to solve this, I've been googling around and still can't find the best solutions. Any suggestion would be appreciated. Bootply Version - http://www.bootply.com/LCQIOKXudR
Thanks in advance.
$(".nav-tabs").on("click", "a", function(e) {
e.preventDefault();
$(this).tab('show');
})
.on("click", "span", function() {
var anchor = $(this).siblings('a');
$(anchor.attr('href')).remove();
$(this).parent().remove();
$(".nav-tabs li").children('a').first().click();
});
$('.add-contact').click(function(e) {
e.preventDefault();
var id = $(".nav-tabs").children().length; //think about it ;)
var num = $('.clonedInput').length, // Checks to see how many "duplicatable" input fields we currently have
newNum = new Number(num + 1), // The numeric ID of the new input field being added, increasing by 1 each time
newElem = $('#entry' + num).clone().attr('id', 'entry' + newNum).fadeIn('slow'); // create the new element via clone(), and manipulate it's ID using newNum value
$(this).closest('li').before('<li class="active"><a href="#contact_' + id + '">Friend ' + id + '</a><span class="badge">x</span></li>');
$('.tab-content').append('<div class="tab-pane" id="contact_' + id + '"><h2 id="reference" name="reference" class="heading-reference">Friend ' + id + '</h2><div class="form-group"><label class="label_fn control-label" for="first_name">First name:</label><input id="friend_first_name' + id + '" name="first_name" type="text" placeholder="" class="input_fn form-control" required=""></div></div>');
});.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
.nav-tabs > li {
position: relative;
}
.nav-tabs > li > a {
display: inline-block;
}
.nav-tabs > li > span {
display: none;
cursor: pointer;
position: absolute;
right: 6px;
top: 8px;
color: red;
}
.nav-tabs > li:hover > span {
display: inline-block;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a href="#contact_01" data-toggle="tab">Friend</a>
</li>
<li><a href="#" id="addBtn" class="add-contact" data-toggle="tab">+ Add Friend</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="contact_01">
<div id="entry1" class="clonedInput">
<h2 id="reference" name="reference" class="heading-reference">Friend 1</h2>
<div class="form-group">
<label class="label_fn control-label" for="first_name">First name:</label>
<input id="first_name" name="first_name" type="text" placeholder="" class="input_fn form-control" required="">
</div>
</div>
</div>
</div>
</div>