Bootstrap forms: How to dynamically create unique names for radio buttons

Question

This question is a follow-up to this one.

This JSfiddle exemplifies what I want to achieve.

Final Solution provided by @Scaramouche

The function below is dynamically building up a "list" with radio buttons in groups of four.

Each of these group should have a unique name, which makes it possible to choose one of the options while still making it possible to choose other options in the other "groups". What makes this a challenge is that this "list" is built with Bootstrap forms. How do I do, to create these names dynamically? This can be done either with Vue or with JavaScript (no preference there).

HTML on JSfiddle

<div id="singleQuestionModule">
    <form class="form-group">
        <div class="d-flex justify-content-center">
            <fieldset class="form-group row">
                <span class="module">
                    <legend class="col-form-legend col-sm-10"></legend>
                    <div class="input-group input-group">
                        <label id="wQuestionLabel" class="form-control-label" style="width: 540px;" for="wQuestion">Question:</label>

                    </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="input-group input-group">
                  <span class="input-group-addon">
                    <input type="radio" name= "q" id="option1" aria-label="">
                  </span>
                            <input type="text" class="form-control" aria-label="" style="width: 540px;">
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="input-group input-group">
                  <span class="input-group-addon">
                    <input type="radio" name="q" id="option2" aria-label="">
                  </span>
                            <input type="text" class="form-control" aria-label="" style="width: 540px;">
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="input-group input-group">
                  <span class="input-group-addon">
                    <input type="radio" name="q" id="option3" aria-label="">
                  </span>
                            <input type="text" class="form-control" aria-label="" style="width: 540px;">
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="input-group input-group">
                  <span class="input-group-addon">
                    <input type="radio" name="q" id="option4" aria-label="">
                  </span>
                            <input type="text" class="form-control" aria-label="" style="width: 540px;">
                        </div>
                    </div>
                </span>
                <span class="options-label"></span>
                <br>
                <div class="form-group row">
                    <div class="btn-group" data-toggle="buttons">
                        <label class="btn btn-success" id="radioAddQuestion">
                            <input type="radio" @click="counter += 1" 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>

JavaScript

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

    let singleQuestionModule = "singleQuestionModule";
    let question = $(".module:first").html();
    let question_label = $(".question-label:first").html();

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

});

Answer 1

Use a counter to modify the name for the next group. Also changed .html() to .clone() to work with a copy of the whole element instead of just its content.

https://jsfiddle.net/DTcHh/60016/

Answer 2

The trick is to look for the last .module added. Now, using .html() to insert the new fields, you do not have this wrapping span... So use .clone() instead. It will be easier to target the newly appended markup.

Then, using a variable to count the click events... You can create unique id.

var n=0;
$("body").on('click', '#radioAddQuestion', function () {

  // Counter.
  n++;

  var singleQuestionModule = "singleQuestionModule";

  var question = $(".module:first").clone();
  var question_label = $(".question-label:first").html();

  $(question_label).insertBefore(".options-label");
  console.log(question_label);  // Undefined in this example...

  $(question).insertBefore(".options-label");
  console.log(question.html());

  // Add "_" and a number to the ids.
  $(document).find(".module:last").find("input[type='radio']").each(function(){
    $(this).attr("id",$(this).attr("id")+"_"+n);
  });
});

Your updated Fiddle.