'The Add checkbox feature does not work when I press "done" and replaces it

I am trying to write a script that when you press edit and then press add btn it will add a textbox and a checkbox and then when you press done it will replace the textbox with the value of the textbox. I have been having problems with replacing the values of the textboxs. Also, when I inspect the website it keeps saying that 'fieldSet' and 'fieldWrapper' is not defined. Any help is appericated and if there is anything I can change to make this script better let me know, thank you. Just Look at the Html and JQuery Part, the css is there just for

$(document).ready(function() {
  $("#editBtn").click(function() {
    $("#addBtn").css("display", "block");
    $("#doneBtn").css("display", "block");
    $("#doneBtn").click(function() {
      $("#addBtn").css("display", "none");
      $("#doneBtn").css("display", "none");
    })


    $("#addBtn").click(function() {
      var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\" />");
      var lastField = $("#buildyourform div:last");
      var intId = (lastField && lastField.length && lastField.data("idx") + 1) || 1;
      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() {
      var fieldSet = $("<fieldset id=\"yourform\"><legend>Your Form</legend></fieldset>");
      $("body").append(fieldSet);
      $("#buildyourform div").each(function() {
        var id = "checkbox" + $(this).attr("id").replace("field", "");
        console.log(id);
        var label = $("<label for=\"" + id + "\">" + $(this).find("input.fieldname").val() + "</label>");
        var input = $("<input type=\"checkbox\" id=\"" + id + "\" name=\"" + id + "\" />");

        fieldSet.append(label);
        feildSet.append(input);
      });
      $("body").append(fieldSet);
    });
  });

});
#editBtn {
  background: linear-gradient(to right, #ffd89b, #19547b);
  padding: 15px 20px;
  display: block;
  float: right;
  color: white;
  border-radius: 10px;
  border-style: none;
  margin-left: 5px;
  font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

#editBtn:hover {
  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
  transition-duration: 0.5s;
}

#addBtn {
  background: linear-gradient(to right, #ffd89b, #19547b);
  padding: 15px 20px;
  display: none;
  float: right;
  color: white;
  border-radius: 10px;
  border-style: none;
  margin-left: 5px;
  font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

#addBtn:hover {
  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
  transition-duration: 0.5s;
}

#doneBtn {
  background: linear-gradient(to right, #ffd89b, #19547b);
  padding: 15px 20px;
  display: none;
  float: right;
  color: white;
  border-radius: 10px;
  border-style: none;
  margin-left: 5px;
  font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

#doneBtn:hover {
  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
  transition-duration: 0.5s;
}

fieldset {
  border-style: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
  <title>My Site: Social Studies</title>

</head>

<body>
  <div class="middle-checklist-box-social">
    <fieldset id="buildyourform">
      <label class="container"> 
                <input id="chkbx001" class="giannisCheckbox" type="checkbox" >
                <span class="checkbox-label-class">Social Studies Unit 8 Review (Graded)</span>
            </label>
      <!-- Put in a grey line that seperates the checkbox from the others  -->
      <p class="chkbxLowerLine"></p>
      <!-- New Checkbox here under the line  -->
      <label class="container"> 
                <input id="chkbx002" class="giannisCheckbox" type="checkbox">
                <span class="checkbox-label-class">Georgia 3.2.1. GO Project</span>
            </label>
      <p class="chkbxLowerLine"></p>
      <label class="container"> 
                <input id="chkbx002" class="giannisCheckbox" type="checkbox">
                <span class="checkbox-label-class">Make a New and Edit and Remove Button</span>
            </label>
      <input type="button" id="editBtn" value="EDIT" />
      <input type="button" id="addBtn" value="+" />
      <input type="button" id="doneBtn" value="Done" />
    </fieldset>
  </div>

  <script src="../../JavaScript/confetti.js"></script>
</body>

</html>
javascripthtmljquery


Solution 1:[1]

So I fixed the problem myself. I found that making the feildWrapper and the fieldSet a const and not a var, also that you need too take out the 2 $(body).append(fieldSet); towards the bottom and cleaned the code some.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Gianni Lombardo

Related Questions