Click on the label text, make it appear in the input and edit this label

Question

I’m new to Javascript and I have a dilemma. I can add the content of an input text to a label, but I need to make the content of the label appear in the input type text mentioned, click the edit button and change the content of the label.

$(document).ready(function() {
    $("#add").click(function() {
    	var lastField = $("#buildyourform div:last");
        var intId = (lastField && lastField.length && lastField.data("idx") + 1) || 1;
        var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
        fieldWrapper.data("idx", intId);
		var capturando = "";
		
		capturando = document.getElementById('valor').value;
		
		var x = 1;
        var label_topico = ("<h3><label class=\"li_001\"> " + capturando + " </label></h3>");
        var textarea_topico = ("<textarea class=\"input_text_001\" /></textarea>");
        var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
		
        removeButton.click(function() {
            $(this).parent().remove();
        });
		// acrescenta o label
        fieldWrapper.append(label_topico);
		// acrescenta o textarea
        fieldWrapper.append(textarea_topico);
		// acrescenta o botão remover
        fieldWrapper.append(removeButton);
		// acrescenta o bloco div com o label, textarea e o botão remover
        $("#buildyourform").append(fieldWrapper);
		// limpa a caixa de texto
		document.getElementById("valor").value = "";
    });
    $("#edit").click(function() {
	document.getElementById("valor").value = "";
	});
});

<div id="buildyourform">
	<input type="text" id="valor" class="input_text_001">
	<input type="button" value="Add a field" class="add" id="add" />
<input type="button" value="Edit a field" class="edit" id="edit" />
</div>

Answer 1

Create a event handler to capture a click on the Abels by class .li_001 (Labels class) by adding the label text clicked on input#valor and assigning the label clicked on a previously declared variable with no value:

var editando;
$(document).on("click", ".li_001", function(){
   $("#valor").val($(this).text().trim());
   editando = $(this);
});

In the $("#add").click(function() { remove the variable value editando, because when you add a new element it means it’s no longer an edit:

$("#add").click(function() {
   editando = null;
   // resto do código

In the $("#edit").click(function() { insert a if by checking whether the variable editando has value, meaning that some label is being edited, and also after editing, empty the variable editando:

$("#edit").click(function() {
   if(editando){
      editando.text($("#valor").val());
      editando = null;
   }
   document.getElementById("valor").value = "";
});

That’s all. Watch it work:

$(document).ready(function() {
   
   var editando;
   $(document).on("click", ".li_001", function(){
      $("#valor").val($(this).text().trim());
      editando = $(this);
   });
   
    $("#add").click(function() {
       editando = null;
    	var lastField = $("#buildyourform div:last");
        var intId = (lastField && lastField.length && lastField.data("idx") + 1) || 1;
        var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
        fieldWrapper.data("idx", intId);
		var capturando = "";
		
		capturando = document.getElementById('valor').value;
		
		var x = 1;
        var label_topico = ("<h3><label class=\"li_001\"> " + capturando + " </label></h3>");
        var textarea_topico = ("<textarea class=\"input_text_001\" /></textarea>");
        var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
		
        removeButton.click(function() {
            $(this).parent().remove();
        });
		// acrescenta o label
        fieldWrapper.append(label_topico);
		// acrescenta o textarea
        fieldWrapper.append(textarea_topico);
		// acrescenta o botão remover
        fieldWrapper.append(removeButton);
		// acrescenta o bloco div com o label, textarea e o botão remover
        $("#buildyourform").append(fieldWrapper);
		// limpa a caixa de texto
		document.getElementById("valor").value = "";
    });
      $("#edit").click(function() {
         if(editando){
            editando.text($("#valor").val());
            editando = null;
            document.getElementById("valor").value = "";
         }
      });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="buildyourform">
   <input type="text" id="valor" class="input_text_001">
   <input type="button" value="Add a field" class="add" id="add" />
   <input type="button" value="Edit a field" class="edit" id="edit" />
</div>