I am trying to make a function that generates multiple dynamic ID's with a defined pattern, how do I do that?
followup: Vue.js: How to generare multiple dynamic ID's with a defined pattern
Details:
I am creating a dynamic school-test application. When the button "Add question" is clicked, a div with 4 input fields and 4 radio buttons are generated. Each input and radio button needs to have an ID. So far, the function generates a value, that I hope can be used as an ID. Every radio button has a name, that makes it possible to only choose one option in the group it belongs to. With every button click on the "Add Question" button (which is a radio button), this particular "name" is used to count button clicks. With the help of the counter, the dynamic ID for the "question" input field and "options" input fields (that is connected to the radio buttons) is generated in this pattern:
Example
Testtitle-Question-Option
JavaScriptQ1 (Question)
JavaScriptQ1O1 (Option)
JavaScriptQ1O2
JavaScriptQ1O3
JavaScriptQ1O4
Since there is a div that is generated when the test is launched, and the ID is only generated by button clicks one div won't get it's ID's. It seems that there is only one question in the ID's in the example above when it's in fact two!
I am currently not using saveTest(), which will be used to save the test into a mySQL database, but it may be used to solve this!
1. I want that one extra "group of ID's" is generated, so each input field gets an ID, but how do I do that?
2. When this matter is solved, how do I generate unique ID's for the radio buttons?
3. How do I then do to use the generated values as ID's. How do I "attach" them to their input fields and radio buttons?
4 Is there any other, better ways to solve this? The ID's has to follow a certain pattern since they will be saved in a database and then be used to correct the tests.
I know that it's a rather complex issue, but I have tried to explain as good as possible.
I advise that you look at the jsfiddle instead! Click on Add Question and you will see how it works.
var name=1;
$("body").on('click', '#radioAddQuestion', function () {
var singleQuestionModule = "singleQuestionModule";
var question = $(".module:first").clone()
.find("input:text").val("").end();
var question_label = $(".question-label:first").clone();
$(question).find(':radio').prop('checked', false);
$(question_label).insertBefore(".options-label:last");
$(question).insertBefore(".options-label");
$(question).find(':radio').attr('name', "n" + name);
// Here is where the ID value is currently generated:
name++;
let questionId = theTitle + "Q" + name;
console.log(questionId);
for (a = 1; a <= 4; a++) {
let optionId = theTitle + "Q" + name + "O" + a;
console.log(optionId);
}
console.log(name)
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="singleQuestionModule">
<form class="form-group">
<div class="input-group input-group">
<label id="wQuestionLabel" class="form-control-label" style="width: 540px;" for="wQuestion">Question:</label>
</div>
<!-- The Question Inputfield that needs ID-->
<div class="input-group input-group">
<input type="text" class="form-control" aria-label="" id="wQuestion" style="width: 540px;">
</div>
<div class="input-group input-group">
<label id="questionOptions" class="form-control-label" style="width: 540px;" for="wQuestion">Enter avaible options:</label>
</div>
<!-- The radio buttons and option input fields that need ID's-->
<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 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>
<!-- The Add and Save Test Buttons-->
<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>
