How can I replace a variable in one method from another method-CodePudding

I am working a project where I can add checkboxes but at first I make a textbox and then I press done and then the another button will replace that textbox with the value of that textbox.

When I have them in different methods the variable is not defined and when I put it in the same method it prints out in the console as twice the ids I need.

The first one below is the one that doubles the id - look at the console For both.

$("#addBtn").click(function() {
  var lastField = $("#buildyourform div:last"); // Getting the id of #buildyourownform and getting the last div 
  var intId = (lastField && lastField.length && lastField.data("idx")   1) || 1; // Changing the Id 
  const fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field"   intId   "\"/>");
  fieldWrapper.data("idx", intId);
  // console.log(intId);

  var fName = $("<input type=\"text\" class=\"fieldname\" />");
  var ftype = $("<input type=\"checkbox\" class=\"giannisCheckbox\" />");

  fieldWrapper.append(ftype);
  fieldWrapper.append(fName);
  $("#buildyourform").append(fieldWrapper);

  $("#doneBtn").click(function() {
    // $("#yourform").remove();
    $("#buildyourform div").each(function() {
      var id = "checkbox"   $(this).attr("id").replace("field", "");
      console.log(id);
      var label = $("<label for=\""   id   "\">"   $(this).find("input.fieldname").first().val()   "</label>");

      fName.replaceWith(label);
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" id="addBtn" value="Add" />
<input type="button" id="doneBtn" value="Done" />

<fieldset id="buildyourform"></fieldset>

$("#addBtn").click(function() {
  var lastField = $("#buildyourform div:last"); // Getting the id of #buildyourownform and getting the last div 
  var intId = (lastField && lastField.length && lastField.data("idx")   1) || 1; // Changing the Id 
  const fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field"   intId   "\"/>");
  fieldWrapper.data("idx", intId);
  // console.log(intId);

  var fName = $("<input type=\"text\" class=\"fieldname\" />");
  var ftype = $("<input type=\"checkbox\" class=\"giannisCheckbox\" />");

  fieldWrapper.append(ftype);
  fieldWrapper.append(fName);
  $("#buildyourform").append(fieldWrapper);
});

$("#doneBtn").click(function() {
  // $("#yourform").remove();
  $("#buildyourform div").each(function() {
    var id = "checkbox"   $(this).attr("id").replace("field", "");
    // console.log(id);
    var label = $("<label for=\""   id   "\">"   $(this).find("input.fieldname").first().val()   "</label>");

    fName.replaceWith(label);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <input type="button" id="addBtn" value="Add" />
  <input type="button" id="doneBtn" value="Done" />
  <fieldset id="buildyourform"></fieldset>

CodePudding user response：

Try this

let $buildyourform = $("#buildyourform");

$("#addBtn").click(function() {
    let intId = $buildyourform.children().length   1;
    $("#buildyourform").append(`
        <div  id="field${intId}">
            <input type="checkbox"  />
            <input type="text"  />
        </div>
    `);
});

$("#doneBtn").click(function() {
    $buildyourform.children().each(function() {
        let $checkbox  = $(this).find('.giannisCheckbox');
        let $fieldname = $(this).find('.fieldname');
        let id         = "checkbox"   $(this).attr("id").replace("field", "");

        $checkbox.attr('id', id);
        $fieldname.replaceWith(`<label for="${id}">${$fieldname.val()}</label>`);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" id="addBtn" value="Add" />
<input type="button" id="doneBtn" value="Done" />

<fieldset id="buildyourform"></fieldset>