<div class="col-sm-8">
    <div class="row ">
        <div class="col-sm-12 " style="padding: 0">
            <div class="col-sm-12" >
                <h3>Add Grade Information</h3>
                <hr>
            </div>

            <div class="col-sm-12 " >
                <div class="col-sm-12 gray" >
                    <div class="col-sm-12" ><br></div>
                    <form id="formID2" action="<?php echo base_url() . 'quiz/' . $quiz_info->url . '/add-grade/'; ?>" method="post" name="add_quiz_form" name="add_quiz_form" enctype="multipart/form-data" >

                        <div class="form-group col-sm-5">
                            <div class="input-group">
                                <input type="number" 
                                       data-errormessage-value-missing="Grade Total Number is required!"
                                       class="form-control validate[required, custom[integer]] text-input" 
                                       name="grade_total_number" id="grade_total_number" 
                                       value="<?php echo set_value('grade_total_number'); ?>"
                                       placeholder="Please Type Total Number.." aria-describedby="basic-addon1">
                                <span class="input-group-addon" id="basic-addon1" title="Please Type Total Number"><i class="fa fa-qrcode"></i></span>
                            </div>
                        </div>

                        <div class="form-group col-sm-12" ><br></div>

                        <div id="Add_Grade" class="col-sm-12">
                            <div id="Grade0">
                                <div class="form-group col-sm-5">
                                    <div class="input-group">
                                        <input type="text" 
                                               data-errormessage-value-missing="Grade Name is required!"
                                               class="form-control validate[required] text-input" 
                                               name="grade_name[]" id="grade_name"
                                               placeholder="Please Type Grade Name.." aria-describedby="basic-addon1">
                                        <span class="input-group-addon" id="basic-addon1" title="Please Type Grade Name" ><i class="fa  fa-adn"></i></span>
                                    </div>
                                </div>

                                <div class="form-group col-sm-5">
                                    <div class="input-group">
                                        <input type="number" 
                                               data-errormessage-value-missing="Grade Number is required!"
                                               class="form-control validate[required, custom[integer]] text-input" 
                                               name="grade_number[]" id="grade_number"
                                               placeholder="Please Type Grade Number.." aria-describedby="basic-addon1">
                                        <span class="input-group-addon" id="basic-addon1" title="Please Type Grade Number" ><i class="fa  fa-qrcode"></i></span>
                                    </div>
                                </div>
                                <div class="form-group col-sm-2 ">
                                    <a href="#" onclick=""><i class="fa fa-times-circle fa-2x"></i></a>
                                </div>
                            </div>
                        </div>

                        <div class="form-group col-sm-12" ><br></div>

                        <div class="form-group col-sm-3 col-sm-offset-9">
                            <a href="#" onclick="AddMoreGrade('Add_Grade_more');" class="green-btn btn btn-success" >Add More.. </a>
                        </div>

                        <div class="form-group col-sm-12" ><br></div>

                        <div class="form-group col-sm-4 col-sm-offset-4">
                            <input type="submit" class="green-btn btn btn-default" value="Add Grade !"><br/><br/>
                        </div>
                        <div class="col-sm-4"></div>
                    </form>

                </div>
            </div>


        </div><!-- /.row gray -->


    </div>
</div>


<script>
    var gradeNumber = 0;
    var limit = 10;

    function AddMoreGrade(Add_Grade_more)
    {
        //        alert(Add_Grade_more);
        gradeNumber++;
        serverPage = "<?php echo base_url(); ?>" + "add_more_grade/" + gradeNumber;
        xmlhttp.open("GET", serverPage);
        //                alert(serverPage);
        xmlhttp.onreadystatechange = function ()
        {
            //            alert(xmlhttp.readyState);
            //            alert(xmlhttp.status);
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {
                var Add_Grade = document.getElementById('Add_Grade');
                var div1 = document.createElement('div');
                div1.setAttribute('id', 'Grade' + gradeNumber)
                var data1 = xmlhttp.responseText;
                div1.innerHTML = data1;
                Add_Grade.appendChild(div1);
            }
        }
        xmlhttp.send(null);
    }
    
    

    //                                              
</script>