JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<head>

	<title>Настройки интересов</title>
	<!--jQuery-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<!--Bootstrap-->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>


</head>
<body>
	<main>
		<div class="container">
			<h1>Настройки интересов</h1>
			<div class="warpper">
			<div class="tabs">


				<ul class="nav nav-tabs">
				  <li class="active"><a data-toggle="tab" href="#tab1">Панель 1</a></li>
				  <li><a data-toggle="tab" href="#tab2">Панель 2</a></li>
				  <li class="button_add_tab"><a href="#">Добавить подборку</a></li>
				</ul>

				 
				<div class="tab-content">
					<div id="tab_clone" class="tab-pane fade">
						<div class="row">
							<div class="col-xs-2">
								<label>Название подборки</label>
								<input type="text" class="form-control name_sample" placeholder=".col-xs-2">
							</div>
							<div class="col-xs-3">
								<label>Ваш город</label>
								<input type="text" class="form-control" placeholder=".col-xs-3">
							</div>
							<div class="col-xs-4">
								<input type="text" class="form-control" placeholder=".col-xs-4">
							</div>
							<a class="button_remove_tab" href="#">Удалить подборку</a>
						</div>
					</div>
					<div id="tab1" class="tab-pane fade in active">
						<div class="row">
							<div class="col-xs-2">
								<label>Название подборки</label>
								<input type="text" class="form-control name_sample" placeholder=".col-xs-2">
							</div>
							<div class="col-xs-3">
								<label>Ваш город</label>
								<input type="text" class="form-control" placeholder=".col-xs-3">
							</div>
							<div class="col-xs-4">
								<input type="text" class="form-control"...

JavaScript

$(document).ready(function(){

	//Создание новой подборки
	$('.button_add_tab').click(function(){
		var n = $('.nav-tabs li').length;
		$(this).before('<li><a data-toggle="tab" href="#tab'+n+'">Подборка '+n+'</a></li>');
		$('#tab_clone').clone().attr("id", "tab"+n).appendTo('.tab-content');
    watchChanges();
	});	


	//Удаление подборки
	$('.button_remove_tab').click(function(){
		alert('изменил');
	});

	//Изменение имени подборки
	watchChanges();
	function watchChanges(){
  	$('.name_sample').change(function(){
      //var this_value = $(this).val();
      //$('.nav-tabs .active a').html(this_value);
      alert('изменил');
		});
  }
});