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();
            });
    });
});
toggle switch style03

toggle switch style03

Timeline style05

Timeline style05

Texte Block Posts Style01

Texte Block Posts Style01

Scroll to div ID

Scroll to div ID

Responsive image grid

Responsive image grid

Page construction avec compte à rebours style02

Page construction avec compte à rebours style02

Loading style book loader

Loading style book loader

Input range slider HTML style04

Input range slider HTML style04

Form login b4 01

Form login b4 01

Dropdown right aligned B4

Dropdown right aligned B4

Chercher un mot sur la liste

Chercher un mot sur la liste

Ajouter une pagination1

Ajouter une pagination1