I am developing a webpage with dynamically generated input-fields and radio-buttons. Becuase of this each ID to the radio-buttons and input-fields is also generated dynamically.

The website is meant to be a school test application. This part of the website is where the teacher may create a test where each question has four alternatives, one which one of them is correct. Each test is meant to be sent to many different persons. And of course, the test application can be used to create tests with many different titles. When a test is saved to a database, it must be possible to collect all data from these tests. 

1- How do I collect the data of the input-fields?
2- How do I show which radio-button and ìts paired input-field that was selected
3- How do I maintain the relationship between the different values? 
4- how do I save the data to a MySQL database?

The title, the questions, the answers and which of these is the correct way. Because of this, the generation of the different test-ids is rather complicated and follows a certain pattern:

All test-titles has the ID: "theTitle"

**Each question has an ID that has this particular pattern:**

```
theTitle + "Q" + name

```

Q for "question"

name is a numeric value: The first question has number one and so on.
Example: *JavaQ1*

**Each ID of the four radio buttons has this pattern:**

```
theTitle + "Q" + name + "O" + "1"

```

O for Option
"1" can be 1 to four.
Example *JavaQ5O4*

**Each ID of the for input-fields that is paired with the radio-buttons has this pattern:**

```
theTitle + "Q" + name + "input" + "1"

```

Example: *JavaQ4input4*

**And each radio-button has also a name to distinguish them from other groups of radio-buttons. These names follow this pattern:**

```
theTitle + "rb" + name

```

rb for radiobutton

Example: *Java10rb4*

**JavaScript:** [JsFiddle: Here you can see the application in action](https://jsfiddle.net/d9tfk1u6/59/)!

```
   $("body").on('click', '#radioAddQuestion', function () {
    name++;
    $(".dynamicform").append(createQuestion(name));

});

$(".dynamicform").append(createQuestion(name));
function createQuestion(name){
    var dynamic=`<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">
                         <!-- The Question Inputfield that needs ID-->

                            <input type="text" class="form-control" aria-label="" id="${theTitle + "Q" + name}" 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>
                     <!-- The radiobuttons and option inputfields that needs ID's-->

                    <div class="form-group row">
                        <div class="input-group input-group">
                  <span class="input-group-addon">
                    <input type="radio" value="1"  name="${theTitle +"rb"+name}" id="${theTitle + "Q" + name + "O" + "1"}" aria-label="">
                  </span>
                            <input type="text" id="${theTitle + "Q" + name + "input" + "1"}" 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" value="2" name="${theTitle +"rb"+name}" id="${theTitle + "Q" + name + "O" + "2"}" aria-label="">
                  </span>
                            <input type="text" id="${theTitle + "Q" + name + "input" + "2"}" 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" value="3" name="${theTitle +"rb"+name}" id="${theTitle + "Q" + name + "O" + "3"}" aria-label="">
                  </span>
                            <input type="text" id="${theTitle + "Q" + name + "input" + "3"}" 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" value="4" name="${theTitle +"rb"+name}" id="${theTitle + "Q" + name + "O" + "4"}" aria-label="">
                  </span>
                            <input type="text" id="${theTitle + "Q" + name + "input" + "4"}" class="form-control" aria-label="" style="width: 540px;">
                        </div>
                    </div>
                </span>
                `;
    return dynamic;

```