How can I extract the values entered in the input boxes generated dynamically and pass it to controller using jquery?

Question

I have a form wherein a user can enter input boxes and remove them at a click. I want to extract the values entered in these input boxes and pass them to controller using jQuery. How do I do that?Right now I am using ids to extract the values but I do not think that is a better method because suppose I add 4 options and then I remove all of them and then again add inputs, I will not be able to track these ids and extract the values.

Here is my HTML code:

<button type="button" class="addoption" id="addoption_btn">Add more option</button>
<div id="Options">
<input type="text" name="mytext[]" id="option_1" placeholder="Option 1"/>
</div>

Here is my JavaScript:

var MaxOptions       = 4; //maximum input boxes allowed
    var Optionsform   = $("#Options"); //Input boxes wrapper ID
    var AddButton       = $("#addoption_btn"); //Add button ID
    var x = Optionsform.length; //initial text box count
    var OptionCount=1; //to keep track of text box added  
    $(AddButton).click(function (e)  //on add input button click
{
        if(x <= MaxOptions) //max input box allowed
        {
            OptionCount++; //text box added increment
            //add input box
            $(Optionsform).append('<div><input type="text" name="mytext[]" id="option_'+ OptionCount +'" placeholder="Option '+ OptionCount +'"/><a href="#" class="removeclass">&times;</a></div>');
            x++; //text box increment
        }
return false;
});

$("body").on("click",".removeclass", function(e){ //user click on remove text
        if( x > 1 ) {
                $(this).parent('div').remove(); //remove text box
                x--; //decrement textbox
        }
return false;
}); 

Here is the jQuery I am using to pass the data to my controller:

    $("#addquestion_btn").click(function(){
        var val= CKEDITOR.instances['question_topic'].getData();
           storequestion(val);        
    });


function storequestion(ques)
    {
        $.post("/instructor/store/question",{
            question: ques,
            option1: $("#option_1").val(),
            option2: $("#option_2").val()
        },function(data){
            if(data[0]==="success")
                {
                    window.location.href = '/instructor/create/topics';
                }
                else
                    {
                        alert("fails");
                        window.location.href = '/instructor';
            //redirect to further page to enter courses
        }}
    ,'json');


    } 

Answer 1

Please use below mentioned code to read through all displayed options.

function storequestion(ques) {
            obj = {};
            obj[question] = ques;
            $("#Options:input[name*='mytext']").each(function (index) {
                obj['option' + index] = $(this).val();
            });

            $.post("/instructor/store/question", obj
                , function (data) {
                    if (data[0] === "success") {
                        window.location.href = '/instructor/create/topics';
                    }
                    else {
                        alert("fails");
                        window.location.href = '/instructor';
                        //redirect to further page to enter courses
                    }
                }
                , 'json');


        }