Jquery - Dynamic checkbox / radiobuttons - Add more options

Question

I'm creating an app to build your own form with JQuery. I want to add more options on the checkbox and the radio type questions. For some reason the last function isn't working. It's meant to add a new option when clicking on the button created in the first function.

//Adding a checkbox question
$("#addCheckboxQuestion").click( function(){
$("#rectangle").before("<br><input type='text'placeholder='Question'> <input type='checkbox'> <input type='text' placeholder='Opção'> <button class='btn newOption'>+</button>");
});

//Adding a new option
$(".newOption").click( function(){
console.log("+ radiobutton");
$(this).before("<input type='checkbox'> <input type='text' placeholder='Option'>");
});

I tried putting " onclick='' " directly on the button and do a normal javascript function and it worked fine. The problem with that is that if I have several checkbox type questions new options will only be added to the first question.

Answer 1

Update: I think I understand your question now. Check out the new Code.

It is probably not a very beautiful solution but this should work.

Creating an element with jQuery, than attaching the event, than attaching the new element with the event onto the DOM.

I added some HTML so that the example can run here.

$("#btn1").click( function(){
var question = $("<div><input type='text'placeholder='Question'> <input  type='checkbox'> <input type='text' placeholder='Opção'><button class='btn newCheck'>Add Option</button></div>");

    $("#rectangle").before(question);
    
    $(question).find(".newCheck").click( function(){
      console.log("+ radiobutton");

      $(this).before("<input type='checkbox'> <input type='text' placeholder='Option'>");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn1">Add Question</button>
<div id="rectangle"></div>