pedroinfo/HtmlDinamico.html

## HtmlDinamico.html
<!DOCTYPE html>

<html lang="pt-br">
<head>
<title></title>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
        <style type="text/css">
            .center-block {
                display: block;
                margin-right: auto;
                margin-left: auto;
            }
        </style>

        <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top"></nav>
        <div class="container">
            <div class="pesquisa">

                <div id="clonedInput1" class="clonedInput">
                    <div class="linha">
                        <label>Filtro:</label>

                        <select name="Filtro[]">
                            <option value="Igual">Igual</option>
                            <option value="Inicia">Inicia com</option>
                            <option value="Termina">Termina com</option>
                            <option value="Contem">Contém</option>
                        </select>

                        <label>Palavra Chave</label>
                        <input type="text" name="palavraChave[]" id="palavraChave" runat="server" />

                        <label>Condição</label>

                        <select name="Condicao[]">
                            <option value="volvo">E</option>
                            <option value="saab">OU</option>
                        </select>

                        <button type="button" class="clone btn btn-primary">
                            <span class="fa fa-plus-circle"></span>Adicionar
                        </button>

                        <button type="button" class="remove btn btn-danger">
                            <span class="fa fa-trash"></span>Remover
                        </button>

                    </div><!--Linha -->
                <br /></div><!--clonedInput1-->
            </div><!--pesquisa-->

            <div class="center-block">
                <button type="button" class="btn btn-info">
                    <span class="fa fa-search"></span>Procurar
                </button>
            </div>

        </div><!--container-->


    <script type="text/javascript">
        var regex = /^(.+?)(\d+)$/i;
        var cloneIndex = $(".clonedInput").length;

        function clone() {
            $(this).parents(".clonedInput").clone()
                .appendTo(".pesquisa")
                .attr("id", "clonedInput" + cloneIndex)
                .find("*")
                .each(function () {
                    var id = this.id || "";
                    var match = id.match(regex) || [];
                    if (match.length == 3) {
                        this.id = match[1] + (cloneIndex);
                    }
                })
                .on('click', 'button.clone', clone)
                .on('click', 'button.remove', remove);
            cloneIndex++;
        }
        function remove() {
            $(this).parents(".clonedInput").remove();
        }
        $("button.clone").on("click", clone);

        $("button.remove").on("click", remove);
    </script>
</body>
</html>
	<!DOCTYPE html>

	<html lang="pt-br">
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</head>
	<body>
	<style type="text/css">
	.center-block {
	display: block;
	margin-right: auto;
	margin-left: auto;
	}
	</style>

	<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top"></nav>
	<div class="container">
	<div class="pesquisa">

	<div id="clonedInput1" class="clonedInput">
	<div class="linha">
	<label>Filtro:</label>

	<select name="Filtro[]">
	<option value="Igual">Igual</option>
	<option value="Inicia">Inicia com</option>
	<option value="Termina">Termina com</option>
	<option value="Contem">Contém</option>
	</select>

	<label>Palavra Chave</label>
	<input type="text" name="palavraChave[]" id="palavraChave" runat="server" />

	<label>Condição</label>

	<select name="Condicao[]">
	<option value="volvo">E</option>
	<option value="saab">OU</option>
	</select>

	<button type="button" class="clone btn btn-primary">
	<span class="fa fa-plus-circle"></span>Adicionar
	</button>

	<button type="button" class="remove btn btn-danger">
	<span class="fa fa-trash"></span>Remover
	</button>

	</div><!--Linha -->
	<br /></div><!--clonedInput1-->
	</div><!--pesquisa-->

	<div class="center-block">
	<button type="button" class="btn btn-info">
	<span class="fa fa-search"></span>Procurar
	</button>
	</div>

	</div><!--container-->


	<script type="text/javascript">
	var regex = /^(.+?)(\d+)$/i;
	var cloneIndex = $(".clonedInput").length;

	function clone() {
	$(this).parents(".clonedInput").clone()
	.appendTo(".pesquisa")
	.attr("id", "clonedInput" + cloneIndex)
	.find("*")
	.each(function () {
	var id = this.id \|\| "";
	var match = id.match(regex) \|\| [];
	if (match.length == 3) {
	this.id = match[1] + (cloneIndex);
	}
	})
	.on('click', 'button.clone', clone)
	.on('click', 'button.remove', remove);
	cloneIndex++;
	}
	function remove() {
	$(this).parents(".clonedInput").remove();
	}
	$("button.clone").on("click", clone);

	$("button.remove").on("click", remove);
	</script>
	</body>
	</html>