Creating table with specific amount of rows in a modal in bootstrap?

Question

I am trying to create a modal with a table in it that has a specified amount of rows from a select option. Here is the html code that I have.

      <div class ="form-group">
            <label for="RiskFields">How many fields will be needed for the Risk Assesment? <br> </label>
                <select id="RiskFields">
                    <option value = "5">5</option>
                    <option value = "6">6</option>
                    <option value = "7">7</option>
                    <option value = "8">8</option>
                    <option value = "9">9</option>
                    <option value = "10">10</option>
                </select>
                <p></p>
            <button type="button" class="btn btn-info btn-sm"  data-toggle="modal" data-target="#myModal" id = "createFields">Create Fields</button>

            <div class="modal fade" id="myModal" role="dialog">
                <div class="modal-dialog">

                  <!-- Modal content-->
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                      <h4 class="modal-title">Fields</h4>
                        </div>
                        <div class="modal-body">         
                         <table class = "table-bordered" width = "500" id = "fieldTables" >
                            <p> Input the Fields </p>
                            <p> The total score is out of 5 </p>
                            <thead>
                                <tr>
                                    <td width ="5%" data-field = "numField"> Field # </td>
                                    <td width ="20%" class = "test-center" dataField = "scoreBegin">Score</td>
                                    <td width="15%" class="text-center" data-field = "scoreEnd">Score</td>
                                    <td width="60%" class="text-center" data-field = "options" >options
                                    </td>
                                </tr> 


                            </thead>
                            <tbody>
                                 <tr>
                                    <td width ="5%" id = "numFirstField"> 1 </td>
                                    <td width ="20%" class = "text-center" id = "scoreNumBegin" >Score's from <br> 0</td>
                                    <td width="15%" class="text-center" id = "scoreNumEnd">To <input type = "text" class = "form-control" name = "firstScoreEnd">  </td>
                                    <td width="60%" class="text-center" id = "options" >
                                        <label for = "optionList">Choose from the following</label>
                                            <select class="form-control" multiple = "multiple" name = "options0" id = "optionList0">
                                                <option>Do Nothing</option>
                                                <option>Send to Watchlist</option>
                                                <option> do Something </option>
                                            </select>
                                    </td>
                                </tr>

                            </tbody>
                            <tfoot>
                                <tr>
                                    <td width ="5%" data-field = "numFieldLast">  </td>
                                    <td width ="20%" class = "text-center" datafield = "scoreBegin" >Score's from <input type = "text" class = "form-control" data-field = "score1"></td>
                                    <td width="15%" class="text-center" data-field = "scoreEnd">To <br> 5  </td>
                                    <td width="60%" class="text-center" data-field = "options" >
                                        <label for = "optionList">Choose from the following</label>
                                            <select class="form-control" id="optionList5" multiple = "multiple">
                                               <option>Do Nothing</option>
                                                <option>Send to Watchlist</option>
                                                <option> do Something </option>
                                            </select>

                                    </td>
                                </tr>
                            </tfoot>        
                        </table>    
                        </div>
                        <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                  </div>

                </div>
              </div>
            </div>

What i want the application to do is I want it to create the table depending on the amount selected - 2 row because the first and the last rows have been created. So I want the selected fields or rows to be added right after the first field in the tbody. I was looking at this code as a reference but it hasnt worked yet. here is the javascript that i used to create it.

<script>
    $(document).ready(function(){
      var numFields = parseInt(document.getElementById(('#RiskFields').value);
      $("#createFields").click(function(){
         $for(var i = 1; i < numFields ; i++){
            if (i == 1 ){
                break;
            }
            else{
                var row = ("<tr><td>"+ (i+1) +"</td><td><input name='scoreBeg"+i+"' type='text' class='form-control input-md'> </td><td><input  name='scoreEnd"+i+"' type='text'  class='form-control input-md'></td><td><label for ='options" + i + "'>Selectfrom the following</label><select class = 'form-control' multiple = 'multiple' name = 'options "+i + "' id = 'optionList" + i +"'><option>Do Nothing</option> <option>Send to Watchlist</option><option>dosomething</option></select></td>");

                        ("#fieldTables > tbody").append(row);
            }    
        }
    });            
  });
</script> 

Is it maybe because im trying to create it in a modal that it is having problems. Let me know if you have any suggestions. I have been trying to figure this out for a couple hours now and im starting to pull out my hair. Thank you very much.

Answer 1

        function createFields() {
            var numFields = $("#RiskFields option:selected").val(); // parseInt(document.getElementById(('#RiskFields').value));
            for (var i = 1; i < numFields; i++) {
                if (numFields == 1) {
                    break;
                }
                else {
                    var row = ("<tr><td>" + (i + 1) + "</td><td><input name='scoreBeg" + i + "' type='text' class='form-control input-md'> </td><td><input  name='scoreEnd" + i + "' type='text'  class='form-control input-md'></td><td><label for ='options" + i + "'>Selectfrom the following</label><select class = 'form-control' multiple = 'multiple' name = 'options " + i + "' id = 'optionList" + i + "'><option>Do Nothing</option> <option>Send to Watchlist</option><option>dosomething</option></select></td>");

                    $("#fieldTables tbody").append(row);
                }
            }
        }

 
 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="form-group">
        <label for="RiskFields">
            How many fields will be needed for the Risk Assesment?
            <br>
        </label>
        <select id="RiskFields">
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
        </select>
        <p>
        </p>
        <a type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal"
            onclick="createFields()" id="createFields">Create Fields</a>
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            &times;</button>
                        <h4 class="modal-title">
                            Fields</h4>
                    </div>
                    <div class="modal-body">
                        <table class="table-bordered" width="500" id="fieldTables">
                            <p>
                                Input the Fields
                            </p>
                            <p>
                                The total score is out of 5
                            </p>
                            <thead>
                                <tr>
                                    <td width="5%" data-field="numField">
                                        Field #
                                    </td>
                                    <td width="20%" class="test-center" datafield="scoreBegin">
                                        Score
                                    </td>
                                    <td width="15%" class="text-center" data-field="scoreEnd">
                                        Score
                                    </td>
                                    <td width="60%" class="text-center" data-field="options">
                                        options
                                    </td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td width="5%" id="numFirstField">
                                        1
                                    </td>
                                    <td width="20%" class="text-center" id="scoreNumBegin">
                                        Score's from
                                        <br>
                                        0
                                    </td>
                                    <td width="15%" class="text-center" id="scoreNumEnd">
                                        To
                                        <input type="text" class="form-control" name="firstScoreEnd">
                                    </td>
                                    <td width="60%" class="text-center" id="options">
                                        <label for="optionList">
                                            Choose from the following</label>
                                        <select class="form-control" multiple="multiple" name="options0" id="optionList0">
                                            <option>Do Nothing</option>
                                            <option>Send to Watchlist</option>
                                            <option>do Something </option>
                                        </select>
                                    </td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td width="5%" data-field="numFieldLast">
                                    </td>
                                    <td width="20%" class="text-center" datafield="scoreBegin">
                                        Score's from
                                        <input type="text" class="form-control" data-field="score1">
                                    </td>
                                    <td width="15%" class="text-center" data-field="scoreEnd">
                                        To
                                        <br>
                                        5
                                    </td>
                                    <td width="60%" class="text-center" data-field="options">
                                        <label for="optionList">
                                            Choose from the following</label>
                                        <select class="form-control" id="optionList5" multiple="multiple">
                                            <option>Do Nothing</option>
                                            <option>Send to Watchlist</option>
                                            <option>do Something </option>
                                        </select>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

in your code both the onclick function and data-target is not possible. change it to "anchor tag" . its works good. and some bugs in your jquery. in this "("#fieldTables tbody").append(row)" $ is not given. below the exact code and html remove document.ready

    function createFields() {
        var numFields = $("#RiskFields option:selected").val(); // parseInt(document.getElementById(('#RiskFields').value));
        for (var i = 1; i < numFields; i++) {
            if (numFields == 1) {
                break;
            }
            else {
                var row = ("<tr><td>" + (i + 1) + "</td><td><input name='scoreBeg" + i + "' type='text' class='form-control input-md'> </td><td><input  name='scoreEnd" + i + "' type='text'  class='form-control input-md'></td><td><label for ='options" + i + "'>Selectfrom the following</label><select class = 'form-control' multiple = 'multiple' name = 'options " + i + "' id = 'optionList" + i + "'><option>Do Nothing</option> <option>Send to Watchlist</option><option>dosomething</option></select></td>");

                $("#fieldTables tbody").append(row);
            }
        }
    }


</script>