It is displaying a <tbody> for each row
<p>I have a problem with my jquery parse for my table. I belive my parse at the moment is like this:</p>

<pre><code>&lt;table id="qandatbl"&gt;
&lt;thead&gt;
&lt;tr&gt;
    &lt;th class="qid"&gt;Question No&lt;/th&gt;
    &lt;th class="question"&gt;Question&lt;/th&gt;
    &lt;th class="option"&gt;Option Type&lt;/th&gt;
    &lt;th class="noofanswers"&gt;Number of Answers&lt;/th&gt;
    &lt;th class="answer"&gt;Answer&lt;/th&gt;
    &lt;th class="noofreplies"&gt;Number of Replies&lt;/th&gt;
    &lt;th class="weight"&gt;Number of Marks&lt;/th&gt;
    &lt;th class="image"&gt;Image&lt;/th&gt;
    &lt;th class="video"&gt;Video&lt;/th&gt;
    &lt;th class="audio"&gt;Audio&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;&lt;/tr&gt;
&lt;/tbody&gt;
&lt;tbody&gt;
&lt;tr&gt;&lt;/tr&gt;
&lt;/tbody&gt;
&lt;tbody&gt;
&lt;tr&gt;&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>It is creating a <code>&lt;tbody&gt;</code> for each row. Instead it should display one <code>&lt;tbody&gt;</code> and display all the <code>&lt;tr&gt;</code> in the <code>&lt;tbody&gt;</code>. I want it like below:</p>

<pre><code>&lt;table id="qandatbl"&gt;
&lt;thead&gt;
&lt;tr&gt;
    &lt;th class="qid"&gt;Question No&lt;/th&gt;
    &lt;th class="question"&gt;Question&lt;/th&gt;
    &lt;th class="option"&gt;Option Type&lt;/th&gt;
    &lt;th class="noofanswers"&gt;Number of Answers&lt;/th&gt;
    &lt;th class="answer"&gt;Answer&lt;/th&gt;
    &lt;th class="noofreplies"&gt;Number of Replies&lt;/th&gt;
    &lt;th class="weight"&gt;Number of Marks&lt;/th&gt;
    &lt;th class="image"&gt;Image&lt;/th&gt;
    &lt;th class="video"&gt;Video&lt;/th&gt;
    &lt;th class="audio"&gt;Audio&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>How can I achieve this above?</p>

<p>Below is the jquery code which controls the <code>&lt;tbody&gt;</code> and <code>&lt;tr&gt;</code>.</p>

<pre><code>    function insertQuestion(form) {   

        var $tbody = $("&lt;tbody class='tbody'&gt;&lt;/tbody&gt;");
        var $tr = $("&lt;tr class='optionAndAnswer'&gt;&lt;/tr&gt;");
        var $qid = $("&lt;td class='qid'&gt;" + qnum + "&lt;/td&gt;");
        var $question = $("&lt;td class='question'&gt;&lt;/td&gt;");
        var $noofanswers = $("&lt;td class='noofanswers'&gt;&lt;/td&gt;");
        var $options = $("&lt;td class='option'&gt;&lt;/td&gt;");
        var $answer = $("&lt;table class='answer'&gt;&lt;/table&gt;");
        var $replies = $("&lt;td class='noofreplies'&gt;&lt;div class='wrapper'&gt;&lt;/div&gt;&lt;/td&gt;");
        var $weight = $("&lt;td class='weight'&gt;&lt;/td&gt;");
        var $image = $("&lt;td class='image'&gt;&lt;/td&gt;");
        var $video = $("&lt;td class='video'&gt;&lt;/td&gt;");
        var $audio = $("&lt;td class='audio'&gt;&lt;/td&gt;");

    $('.gridTxt', context).each( function() {

     var $this = $(this);
     var $optionsText = $("&lt;input type='text' class='gridTxtRow maxRow' readonly='readonly' /&gt;&lt;span href='#' class='showGrid'&gt;[Open Grid]&lt;/span&gt;").attr('name',$this.attr('name'))
                     .attr('value',$this.val())

    $options.append($optionsText);
    $questionType = $this.val();

    });

   $('.numberAnswerTxt', context).each(function() {
        var $this = $(this);
        var $noofanswersText = '';

        if ($questionType == 'True or False' || $questionType == 'Yes or No'){

    $noofanswersText = $("&lt;span class='naRow string' style='display: block;'&gt;Only 1 Answer&lt;/span&gt;&lt;input type='text' class='numberAnswerTxtRow answertxt' style='display: none;' onkeyup='numberKeyUp(this)' onkeypress='return isNumberKey(event)' onChange='getButtons()'&gt;").attr('name', $this.attr('name')).attr('value', $this.val())

    }else{

    $noofanswersText = $("&lt;span class='naRow string' style='display: none;'&gt;Only 1 Answer&lt;/span&gt;&lt;input type='text' class='numberAnswerTxtRow answertxt' style='display: block;' onkeyup='numberKeyUp(this)' onkeypress='return isNumberKey(event)' onChange='getButtons()'&gt;").attr('name', $this.attr('name')).attr('value', $this.val())   

    }

        $noofanswers.append($noofanswersText);

        }); 


    $('#questionTextArea').each( function() {

    var $this = $(this);
    var $questionText = $("&lt;textarea onload='resizeTxt'&gt;&lt;/textarea&gt;").attr('name',$this.attr('name'))
                   .attr('value',$this.val())

    $question.append($questionText);



        $tbody.append($tr); 
        $tr.append($qid);
        $tr.append($question);
        $tr.append($options);
        $tr.append($noofanswers);
        $tr.append($answer);
        $tr.append($replies);
        $tr.append($weight);
        $tr.append($image);
        $tr.append($video);
        $tr.append($audio);    
        $('#qandatbl').append($tbody);

    }
</code></pre>

<p>Below is html which sorts out the <code>&lt;thead&gt;</code>  and the table where the jquery <code>&lt;tbody&gt;</code> and <code>&lt;tr&gt;</code> will go into:</p>

<pre><code>&lt;table id="qandatbl" align="center"&gt;
&lt;thead&gt;
&lt;tr&gt;
    &lt;th class="qid"&gt;Question No&lt;/th&gt;
    &lt;th class="question"&gt;Question&lt;/th&gt;
    &lt;th class="option"&gt;Option Type&lt;/th&gt;
    &lt;th class="noofanswers"&gt;Number of Answers&lt;/th&gt;
    &lt;th class="answer"&gt;Answer&lt;/th&gt;
    &lt;th class="noofreplies"&gt;Number of Replies&lt;/th&gt;
    &lt;th class="weight"&gt;Number of Marks&lt;/th&gt;
    &lt;th class="image"&gt;Image&lt;/th&gt;
    &lt;th class="video"&gt;Video&lt;/th&gt;
    &lt;th class="audio"&gt;Audio&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;/table&gt;
</code></pre>
