<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-6"><br> <div class="panel panel-primary"> <div class="panel-heading">Alta Plan <a class="close add-paso" aria-label="Close" href="#"><i class="glyphicon glyphicon-plus "></i></a></div> <div class="panel-body"> <form> <div class="form-group"> <label for="nombre">Nombre</label> <input type="text" class="form-control" id="nombre" placeholder=""> </div> <div class="form-group"> <label for="apellido">Descripcion</label> <textarea name="desc0" placeholder="Description" class="form-control"></textarea> </div> <div class="form-group"> <label for="email">Tipo de Plan</label> <select name="sel0" class="form-control"> <option value"">Select Option</option> <option value"1">Option 1</option> <option value"2">Option 2</option> <option value"3">Option 3</option> </select> </div> <div class="form-group"> <label for="">Tipo de Catastrofe</label> <select name="sel0" class="form-control"> <option value"">Select Option</option> <option value"1">Option 1</option> <option value"2">Option 2</option> <option value"3">Option 3</option> </select> </div> <button type="submit" class="btn btn-default">Crear</button> </form> </div> </div> </div> <div class="col-md-6 contenedor_pasos"><br> <!--<div class="col-md-6"> <div class="panel panel-primary"> <div class="panel-heading">Paso<a class="close remove-paso" aria-label="Close" href="#"><i class="glyphicon glyphicon-remove"></i></a></div> <div class="panel-body"> <div class="form-group"> <label class="sr-only" for="nombre_paso">Nombre</label> <input type="text" class="form-control" id="nombre_paso" placeholder="Nombre paso"> </div> <div class="form-group"> <label class="sr-only" for="desc_paso">Descripcion</label> <textarea name="desc0" id="desc_paso" placeholder="Descripcion ..." class="form-control"></textarea> </div> </div> </div> </div> </div>--> </div> </div> </div>

.table-sortable tbody tr { cursor: move; } .borde{ border:1px solid red; } .add-paso:hover:after{ content:" Paso"; }

$(document).ready(function() { $(function () { $('[data-toggle="tooltip"]').tooltip(); }) var id=0; $(".add-paso").on("click", function() { id+=1; $('.contenedor_pasos').append('<div class="col-md-12" id="paso'+id+'"><div class="panel panel-primary">'+ '<div class="panel-heading">Paso <a class="close" onclick="remover('+id+');" aria-label="Close" href="#"><i class="glyphicon glyphicon-remove"></i></a></div>'+ '<div class="panel-body">'+ '<div class="form-group">'+ '<label class="sr-only" for="nombre_paso">Nombre</label>'+ '<input type="text" class="form-control" id="nombre_paso" placeholder="Nombre paso">'+ '</div>'+ '<div class="form-group">'+ '<label class="sr-only" for="desc_paso">Descripcion</label>'+ '<textarea name="desc0" id="desc_paso" placeholder="Descripcion ..." class="form-control"></textarea>'+ '</div>'+ '</div>'+ '</div>'+ '</div></div>'); }); }); function remover(id){ //alert(id); var dato = "paso"+id; //alert(dato); $('#'+dato).remove(); }