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();
            });
    });
});
3D Gallery with CSS3 and jQuery

3D Gallery with CSS3 and jQuery

Asidebar Menu Style01

Asidebar Menu Style01

Card Bootstrap4 01

Card Bootstrap4 01

Card Bootstrap4 02

Card Bootstrap4 02

Card Bootstrap4 E commerce 01

Card Bootstrap4 E commerce 01

Carousel 6 Column Product Slider with B4

Carousel 6 Column Product Slider with B4

Creation dune icone de prechargement avec css

Creation dune icone de prechargement avec css

Input file style01

Input file style01

Lightbox gallery style01

Lightbox gallery style01

Tablet style code texte

Tablet style code texte

Timeline style03

Timeline style03

creation dune icone de prechargement avec css

creation dune icone de prechargement avec css