bonjour à toutes et tous,

j'ai besoin d 'aide car je n'arrive pas à réaliser ce que je veux avec ce code ( à modifier bien sûr).

1) j'arrive à afficher le texte en live et modifiable à volonté mais impossible sur celui qui est dupliqué

2) lorsqu'on choisit un nombre, je veux que se soit uniquement cette quantité qui sera dupliqué ( alors que là  plus on clique sur le bouton "dupliquate", cela affiche plusieurs fois le texte dupliqué

3) l'outil est cloné mais impossible de l'utiliser ( il doit être toujours indépendant, repart à zéro )

4) j'ai mis des annotations dans le code qui s'afficheront sur le rendu

5) démo en live à cette adresse : https://jsfiddle.net/testa/gs5Lt13p/

merci d'avance pour votre aide

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	
	
<div id="outil"> 	
<----------------------------------------------- DEBUT OUTIL ------------------------------------------------------------->
	<br/>
	<br/>

		<div class="toNumDuplicate"> 
			<input type="text" class="heading" />  <---- texte à saisir ---->
	<br/>  
	<br/>
			<input id="num-duplication" type="number" > <---- nombre de fois que le texte saisie sera duppliqué ---->
	<br/>
	<br/>
	  
			<button id="btn_dupliquate">dupliquate</button> <---- valide la duplication ---->
		

			<div class="common_preview" >
	<br/>
				<p class="model"><span>TEST</span> <---- texte qui apparait et évolue en fonction de la saisie ----></p> 
			 </div>
		</div>

		<div class="result"><span></span><---- texte dupliqué et texte qui apparait en fonction de la saisie ----></div> <br/>


<----------------------------------------------- FIN OUTIL -------------------------------------------------------------><br/>
	<br/>
</div>
	<br/>

		
<button id="btn-duppliquer">CLONE</button> <---- clone entièrement l'outil ---->
	<br/>
	<br/>
	<br/>

	
<h3>LE NOUVEL OUTIL CLONÉ EST INDÉPENDANT DE L'OUTIL ORIGINAL </h3>
				
	

$(function() {
  $('body').on('keyup', '.heading', function() {
    var heading = $(this).val();
    $(".common_preview", $(this).parent()).html("<p class='model'><span style='background:red; padding:10px; color:#fff; font-weight:bold'>"+heading+"</span><---- texte qui apparait en fonction de la saisie ----></p>");
    return false;
  });
  
  var idDuplicated = 0;
  
  $('#btn-duppliquer').click(function() {
   var duplicated = $('#outil').clone();
        idDuplicated += 1;
    duplicated.attr('class', 'outil' + idDuplicated);

    
    $('body').append(duplicated);
  });
});

$(function() {
	$('#btn_dupliquate').on('click', function() {
  	var numDuplication = $('#num-duplication').val();
    
    if (numDuplication > -1) {
    	var div = $('.common_preview');
      $('.result').html('');
    	for (var i = 0; i < numDuplication; i++) {
      	$('.result').append(div.clone());
      }
    }
  });
});

#outil{
border : 2px solid red;
padding : 10px
}


span{
background:red; 
padding:10px; 
color:#fff; 
font-weight:bold;
}

-
Edité par AhmedTesta 23 avril 2017 à 4:54:21