Ajouter multiple input dynamique

<!DOCTYPE html>
<html>
<head>
	<title>Ajouter multiple input dynamique | par NGLESSON</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keyword" content="Ajouter multiple input dynamique">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" >
</head>
<body class="container">
	<div class="row">
		<div class="col-lg-8">
			<div id="field">
				<div id="field0">
					<div class="form-group mb-4">
						<label class="col-md-4 control-label" for="Nom">Nom</label>  
						<div class="col-md-5">
						   <input id="Nom" name="Nom" type="text" placeholder="" class="form-control input-md">
						</div>
					</div>
					<br><br>
					<div class="form-group mb-4">
						<label class="col-md-4 control-label" for="Age">Age</label>  
						<div class="col-md-5">
						    <input id="Age" name="Age" type="number" placeholder="" class="form-control input-md">
						</div>
					</div>
					<br><br>
					<div class="form-group mb-4">
					    <label class="col-md-4 control-label" for="Image">Image</label>
						<div class="col-md-4">
							<input type="file" id="Image" name="Image" class="input-file">
							<div id="action_jsondisplay"></div>
						</div>
					</div>
				</div>
			</div>
			<br><br>
			<div class="form-group">
				<div class="col-md-4">
					<button id="add-more" name="add-more" class="btn btn-primary btn-md">Ajouter des inputs</button>
				</div>
			</div>
			<br><br>
		</div>
	</div>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="script.js"></script>	
</body>
</html>

                                    
$(document).ready(function () {
    var next = 0;
    $("#add-more").click(function(e){
        e.preventDefault();
        var addto = "#field" + next;
        var addRemove = "#field" + (next);
        next = next + 1;
        var newIn = '<div id="field'+ next +'" name="field'+ next +'"><!-- Text input--><div class="form-group"> <label class="col-md-4 control-label" for="Nom">Nom</label>'
        +'<div class="col-md-5"> <input id="Nom" name="Nom" type="text" placeholder="" class="form-control input-md"> </div></div>'
        +'<br><br> <!-- Text input--><div class="form-group"> <label class="col-md-4 control-label" for="Age">Age</label>'
        +'<div class="col-md-5"> <input id="Age" name="Age" type="number" placeholder="" class="form-control input-md"> </div>'
        +'</div><br><br><!-- File Button --> <div class="form-group"> <label class="col-md-4 control-label" for="Image">Image</label> '
        +'<div class="col-md-4"> <input id="Image" name="Image" class="input-file" type="file"> </div></div></div>';
        var newInput = $(newIn);
        var removeBtn = '<br><button id="remove' + (next - 1) + '" class="btn btn-danger remove-me btn-xs pull-right" >Supprimer</button></div></div>'
        +'<div id="field"><br>';
        var removeButton = $(removeBtn);
        $(addto).after(newInput);
        $(addRemove).after(removeButton);
        $("#field" + next).attr('data-source',$(addto).attr('data-source'));
        $("#count").val(next);  
        
            $('.remove-me').click(function(e){
                e.preventDefault();
                var fieldNum = this.id.charAt(this.id.length-1);
                var fieldID = "#field" + fieldNum;
                $(this).remove();
                $(fieldID).remove();
            });
    });
});
login page green one

login page green one

creation dune icone de prechargement avec css

creation dune icone de prechargement avec css

Vers le haut

Vers le haut

Timeline style07

Timeline style07

Page construction avec compte à rebours style02

Page construction avec compte à rebours style02

Input range slider HTML style01

Input range slider HTML style01

Image hover 07

Image hover 07

Image hover 06

Image hover 06

Image hover 05

Image hover 05

Form login with background image changed style01

Form login with background image changed style01

Animation 3d social icones avec css3

Animation 3d social icones avec css3

Ajouter une legende dans un formulaire

Ajouter une legende dans un formulaire