<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="page-header"> <h3>Multiple Phone numbers inputs on Bootstrap</h3> </div> <form class="form-horizontal" style="max-width:450px;"> <div class="form-group"> <label class="col-sm-2 control-label">Name</label> <div class="col-sm-10"> <input type="text" class="form-control"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Phone</label> <div class="col-sm-10"> <div class="phone-list"> <div class="input-group phone-input"> <span class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="type-text">Type</span> <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a class="changeType" href="javascript:;" data-type-value="phone">Phone</a></li> <li><a class="changeType" href="javascript:;" data-type-value="fax">Fax</a></li> <li><a class="changeType" href="javascript:;" data-type-value="mobile">Mobile</a></li> </ul> </span> <input type="hidden" name="phone[1][type]" class="type-input" value="" /> <input type="text" name="phone[1][number]" class="form-control" placeholder="+1 (999) 999 9999" /> </div> </div> <button type="button" class="btn btn-success btn-sm btn-add-phone"><span class="glyphicon glyphicon-plus"></span> Add Phone</button> </div> </div> </form> <hr> <small class="text-muted">Working on Bootstrap 3.x.x and up.</small> </div>

.phone-input{ margin-bottom:8px; }

$(function(){ $(document.body).on('click', '.changeType' ,function(){ $(this).closest('.phone-input').find('.type-text').text($(this).text()); $(this).closest('.phone-input').find('.type-input').val($(this).data('type-value')); }); $(document.body).on('click', '.btn-remove-phone' ,function(){ $(this).closest('.phone-input').remove(); }); $('.btn-add-phone').click(function(){ var index = $('.phone-input').length + 1; $('.phone-list').append(''+ '<div class="input-group phone-input">'+ '<span class="input-group-btn">'+ '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="type-text">Type</span> <span class="caret"></span></button>'+ '<ul class="dropdown-menu" role="menu">'+ '<li><a class="changeType" href="javascript:;" data-type-value="phone">Phone</a></li>'+ '<li><a class="changeType" href="javascript:;" data-type-value="fax">Fax</a></li>'+ '<li><a class="changeType" href="javascript:;" data-type-value="mobile">Mobile</a></li>'+ '</ul>'+ '</span>'+ '<input type="text" name="phone['+index+'][number]" class="form-control" placeholder="+1 (999) 999 9999" />'+ '<input type="hidden" name="phone['+index+'][type]" class="type-input" value="" />'+ '<span class="input-group-btn">'+ '<button class="btn btn-danger btn-remove-phone" type="button"><span class="glyphicon glyphicon-remove"></span></button>'+ '</span>'+ '</div>' ); }); });