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 une tr dans une table

Ajouter supprimer une tr dans une table

Bootstrap4 datepicker

Bootstrap4 datepicker

Calculatrice style01

Calculatrice style01

Card Bootstrap4 E commerce 01

Card Bootstrap4 E commerce 01

Carousel 6 Column Product Slider with B4

Carousel 6 Column Product Slider with B4

Checkbox et boutons radios personnalisés en CSS

Checkbox et boutons radios personnalisés en CSS

Creation dune icone de prechargement avec css

Creation dune icone de prechargement avec css

Gallery images with bootstrap4 Flexbox

Gallery images with bootstrap4 Flexbox

Input range slider HTML style01

Input range slider HTML style01

Planète animée style01

Planète animée style01

Timeline style07

Timeline style07

Vidéo background en html5 style01

Vidéo background en html5 style01