Повторить и показать данные json в существующей таблице - jquery

Я получаю jsonData, который я хочу перебрать и показать в table2, который отображается, скрывая table1, когда пользователь нажимает кнопку отправки. Table2 имеет много строк (6 строк), но jsonData, который я получаю, имеет 3 строки, которые Я хочу выполнить итерацию и показать первые 3 строки таблицы 2, а оставшиеся строки пусты в таблице 2, поскольку мы получаем информацию только о 3 строках в jsonData.

Пример демонстрации: http://plnkr.co/edit/OewuCrobeM2cznRgL5Lo?p=preview

Пример кода js:

function submitData(){
   var flag = true;
   if (flag){
     //after getting the values from backend hide the table1 and show table2
     $("#table1").hide();
      $("#table2").show();
     var jsonData = [{"sid":"1023","spread":"3","loanType":"auto","comments":"Loan Approved"},
     {"sid":"1024","spread":"4","loanType":"car","comments":"Loan Approved"},
     {"sid":"1025","spread":"3","loanType":"auto","comments":"Loan Denied"}]

  //iterate and show the jsonData in the table2 which is shown after user click on submit button and hide the table1 and show table2
   } 
 }

Пример HTML-кода:

<table id = "table1" border = "1"> 

    <tr>
        <th>SID</th>
        <th>spread%</th>
        <th>LoanType</th>
         <th>Comments</th>
    </tr>

    <tr>
         <td><input type = "text" name = "sid" id = "sid1" value = "100"></td>
         <td><input type = "text" name = "spread" id = "spread1" value = "6"></td>
         <td><input type = "text" name = "loanType" id = "loanType1" value = "Auto"></td>
         <td><input type = "text" name = "comments" id = "comments1" value = "autoLoan"></td>
     </tr> 
        <tr>
         <td><input type = "text" name = "sid" id = "sid2" value = "200"></td>
         <td><input type = "text" name = "spread" id = "spread2" value = "7"></td>
         <td><input type = "text" name = "loanType" id = "loanType2" value = "Car"></td>
         <td><input type = "text" name = "comments" id = "comments2" value = "carLoan"></td>
     </tr> 
      <tr>
         <td><input type = "text" name = "sid" id = "sid3" value = "300"></td>
         <td><input type = "text" name = "spread" id = "spread3" value = "6"></td>
         <td><input type = "text" name = "loanType" id = "loanType3" value = "Auto"></td>
         <td><input type = "text" name = "comments" id = "comments3" value = "autoLoan"></td>
     </tr> 
</table> 

<table id = "table2" border = "1" style = "display:none">

    <tr>
        <th>SIDTable2</th>
        <th>spread% Table2</th>
        <th>LoanType Table2</th>
         <th>Comments Table2</th> 
    </tr>

    <tr>
         <td><input type = "text" name = "sid" id = "sid1" value = ""></td>
         <td><input type = "text" name = "spread" id = "spread1" value = ""></td>
         <td><input type = "text" name = "loanType" id = "loanType1" value = ""></td>
         <td><input type = "text" name = "comments" id = "comments1" value = ""></td>
     </tr>
         <tr>
         <td><input type = "text" name = "sid" id = "sid2" value = ""></td>
         <td><input type = "text" name = "spread" id = "spread2" value = ""></td>
         <td><input type = "text" name = "loanType" id = "loanType2" value = ""></td>
         <td><input type = "text" name = "comments" id = "comments2" value = ""></td>
     </tr> 
         <tr>
         <td><input type = "text" name = "sid" id = "sid3" value = ""></td>
         <td><input type = "text" name = "spread" id = "spread3" value = ""></td>
         <td><input type = "text" name = "loanType" id = "loanType3" value = ""></td>
         <td><input type = "text" name = "comments" id = "comments31" value = ""></td>
     </tr> 
         <tr>
         <td><input type = "text" name = "sid" id = "sid4" value = ""></td>
         <td><input type = "text" name = "spread" id = "spread4" value = ""></td>
         <td><input type = "text" name = "loanType" id = "loanType4" value = ""></td>
         <td><input type = "text" name = "comments" id = "comments4" value = ""></td>
     </tr> 
         <tr>
         <td><input type = "text" name = "sid" id = "sid5" value = ""></td>
         <td><input type = "text" name = "spread" id = "spread5" value = ""></td>
         <td><input type = "text" name = "loanType" id = "loanType5" value = ""></td>
         <td><input type = "text" name = "comments" id = "comments5" value = ""></td>
     </tr> 
         <tr>
         <td><input type = "text" name = "sid" id = "sid6" value = ""></td>
         <td><input type = "text" name = "spread" id = "spread6" value = ""></td>
         <td><input type = "text" name = "loanType" id = "loanType6" value = ""></td>
         <td><input type = "text" name = "comments" id = "comments6" value = ""></td>
     </tr> 

</table> 
<input type = "submit" value = "submit" onclick = "submitData()">

Примечание. В моем случае таблица существует, и я хочу выполнить итерацию объекта jsonData и отобразить значения в таблице. Но я нахожу примеры, которые динамически создают таблицу и отображают данные JSON в таблице, которые я не могу использовать в моем существующем коде. Любые отзывы были бы полезны ... спасибо.