How do I create a function which copies and inserts it's own div?

Question

Edit: Visit https://jsfiddle.net/DTcHh/40740/ for the final solution!

Update: This question is a followup!

I have a div with an "add question" (Bootstrap) radio button. My intention is, that the div in which the button is placed should be copied and placed underneath when the mentioned button is clicked:

How do I do that? Nothing happens when I click the button.

js.fiddle

HTML:

<div id="singleQuestionModule">
    <div class="question-wrapper">
        <form class="form-group">
            <div class="d-flex justify-content-center">
                <fieldset class="form-group row">
                    <legend class="col-form-legend col-sm-10"></legend>
                    <div class="form-group row">
                        <div class="input-group input-group">
                            <label id="wQuestionLabel" class="form-control-label" style="width: 540px;" for="wQuestion">Question:</label>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="input-group input-group">
                            <input type="text" class="form-control" aria-label="" id="wQuestion" style="width: 540px;">
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="input-group input-group">
                            <label id="questionOptions" class="form-control-label" style="width: 540px;"
                                   for="wQuestion">Enter
                                avaible options:</label>
                        </div>                    
                    </div>
                    <div class="form-group row">
                        <div class="btn-group" data-toggle="buttons">

                            <label class="btn btn-success">
                                <input type="radio" name="options" id="radioAddQuestion"
                                       onclick="addQuestionModule('singleQuestionModule')"
                                       autocomplete="off">Add Question</label>

                            <label class="btn btn-success">
                                <input type="radio" name="options" id="radioSaveTest" value="saveTest()"
                                       autocomplete="off">Save Test </label>
                        </div>
                    </div>
                </fieldset>
            </div>
        </form>
    </div>
</div>

jQuery

$("#radioAddQuestion").click(function() {
    var html = $("#" + singleQuestionModule).html();
    $(html).insertAfter("#" + singleQuestionModule);
});

This is a working example (not my code) that I tried to reproduce.

Answer 1

Updated fiddle.

Your code will work if you define singleQuestionModule and remove the inline-event.

NOTE : If you want the radio button click event to be attached to the new created questions you need to use event delegation .on() like :

$("body").on("click", "#radioAddQuestion", function() {

Code:

$("body").on('click', '#radioAddQuestion', function() {
  var singleQuestionModule = "singleQuestionModule";
  var question = $(".question:first").html();
  var question_label = $(".question-label:first").html();

  $(question_label).insertBefore(".options-label");
  $(question).insertBefore(".options-label");
});

#singleQuestionModule {
  margin-left: 50px;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div id="singleQuestionModule">
  <div class="question-wrapper">
    <form class="form-group">
      <div class="d-flex justify-content-center">
        <fieldset class="form-group row">
          <legend class="col-form-legend col-sm-10"></legend>
          <div class="form-group row question-label">
            <div class="input-group input-group">
              <label id="wQuestionLabel" class="form-control-label" style="width: 540px;" for="wQuestion">Question:</label>
            </div>
          </div>
          <div class="form-group row question">
            <div class="input-group input-group">
              <input type="text" class="form-control" aria-label="" id="wQuestion" style="width: 540px;">
            </div>
          </div>
          <span class="options-label"></span>
          <br>
          <div class="form-group row">
            <div class="input-group input-group">
              <label id="questionOptions" class="form-control-label" style="width: 540px;" for="wQuestion">Enter avaible options:</label>
            </div>
          </div>
          <div class="form-group row">
            <div class="btn-group" data-toggle="buttons">

              <label class="btn btn-success" id="radioAddQuestion">
                <input type="radio" name="options" autocomplete="off">Add Question</label>

              <label class="btn btn-success">
                <input type="radio" name="options" id="radioSaveTest" value="saveTest()" autocomplete="off">Save Test </label>
            </div>
          </div>
        </fieldset>
      </div>
    </form>
  </div>
</div>