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();
            });
    });
});
Ajouter supprimer dynamiquement des lignes sur un tableau

Ajouter supprimer dynamiquement des lignes sur un tableau

Asidebar Bootstrap4 style01

Asidebar Bootstrap4 style01

Form contact avec validation en css

Form contact avec validation en css

Header Aside Footer Admin

Header Aside Footer Admin

Login Bootstrap3

Login Bootstrap3

Pie Charts

Pie Charts

SwiperJS style02 avec 6 colonnes

SwiperJS style02 avec 6 colonnes

Titre section avec une anmation style01

Titre section avec une anmation style01

Vers le haut

Vers le haut

Vidéo background en html5 style02

Vidéo background en html5 style02

creation dune icone de prechargement avec css

creation dune icone de prechargement avec css

toggle switch style02

toggle switch style02