Dynamically added row to the table does not show in the view (laravel)

i am trying to add a row dynamically to a table with the help of JavaScript. when i log out each step in the console, it shows the expected result, however, the new row does not appear on the view.

notification.blade.php

@extends('layouts.app')
@section('title',  '| Homepage')
@section('content')
<div id="wrapper" class="active">

<!-- Sidebar -->
<!-- Sidebar -->
<div id="sidebar-wrapper">
    <ul id="sidebar_menu" class="sidebar-nav">
        <li class="sidebar-brand">menu</li>
    </ul>
    @include('includes.sidebar')
</div>

<!-- Page content -->
<div id="page-content-wrapper">
    <!-- Keep all page content within the page-content inset div! -->
    <div class="page-content inset">
        <div class="row">
            <div class="col-xs-12">
                <div class="well">
                    <form class="form-horizontal" role="form" method="POST" action="">
                        

                        <fieldset>
                            <legend>
                                SECTION 1 - Personal Details
                            </legend>
                            <div class="row">
                                <div class="col-xs-12">

                                    <div class="form-group">
                                        <div class="col-xs-12">
                                            {!! Form::label('unit', 'Unit Code (if teaching):', ['class' => 'control-label']) !!} <br>
                                            {!! Form::text('unit', $value = null, ['class' => 'form-control']) !!}
                                        </div>
                                        <div class="col-xs-12">
                                            {!! Form::label('unit', 'Unit Title (if teaching):', ['class' => 'control-label']) !!} <br>
                                            {!! Form::text('unit', $value = null, ['class' => 'form-control']) !!}
                                        </div>
                                        <div class="col-xs-12">
                                            {!! Form::label('project_Title', 'Project Title (if FYP/research):', ['class' => 'control-label']) !!} <br>
                                            {!! Form::text('project_Title', $value = null, ['class' => 'form-control']) !!}
                                        </div>
                                        <div class="col-xs-12">
                                            {!! Form::label('project_Title', 'Ref. No (if FYP/research):', ['class' => 'control-label']) !!} <br>
                                            {!! Form::text('project_Title', $value = null, ['class' => 'form-control']) !!}
                                        </div>
                                        <div class="col-xs-12">
                                            {!! Form::label('Storage_Location', 'Storage Location:', ['class' => 'control-label']) !!} <br>
                                            {!! Form::text('Storage_Location', $value = null, ['class' => 'form-control' ]) !!}
                                        </div>
                                        <div class="col-xs-12">
                                            {!! Form::label('name_keeper', 'Name of the Keeper:', ['class' => 'control-label']) !!} <br>
                                            {!! Form::text('name_keeper', $value = null, ['class' => 'form-control' ]) !!}
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </fieldset>
                        <fieldset>
                            <div class="row">
                                <div class="col-xs-12">
                                    <div class="row">
                                        <legend>
                                            SECTION 2 – Details of the Biohazardous Materials
                                        </legend>
                                        <div class="col-xs-8">
                                            <h4>A. List of Living Modified Organism (LMO)</h4>
                                        </div>
                                        <div class="col-xs-4">
                                            {!!Form::checkbox('A_list_LMO', 'value')!!} Not Applicable
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-12">
                                            <div id="LMOtablediv">
                                                <input type="button" id="addmoreLMObutton" value="Add" onclick="insRow()" />
                                                <table id="addLMOtable" border="1">
                                                    <thead>
                                                        <tr>
                                                            <td>No.</td>
                                                            <td>Name</td>
                                                            <td>Risk Level</td>
                                                            <td>Quantity</td>
                                                            <td>Volume</td>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                            <td>1</td>
                                                            <td>{!! Form::text('lmoName', null, array('id'=>'lmoName'))!!}</td>
                                                            <td>{!! Form::text('lmorisk_level', null, array('id'=>'lmorisk_level'))!!}</td>
                                                            <td>{!! Form::number('lmoquantity', null, array('id'=>'lmoquantity'))!!}</td>
                                                            <td>{!! Form::number('lmovolume', null, array('id'=>'lmovolume'))!!}</td>
                                                            <td></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
 </div>
</div>
@stop

script.js

  var table = document.getElementById('addLMOtable'),
  tbody = document.querySelector("tbody"),
  clone = tbody.rows[0].cloneNode(true);

function deleteRow(el) {
  var i = el.parentNode.parentNode.rowIndex;
  table.deleteRow(i);
  while (table.rows[i]) {
    updateRow(table.rows[i], i, false);
    i++;
  }
}

function insRow() {
  var new_row = updateRow(clone.cloneNode(true), ++tbody.rows.length, true);
  tbody.appendChild(new_row);

}

function updateRow(row, i, reset) {
    row.cells[0].innerHTML = i;

    var inp1 = row.cells[1].getElementsByTagName('input')[0];
    var inp2 = row.cells[2].getElementsByTagName('input')[0];
    var inp3 = row.cells[3].getElementsByTagName('input')[0];
    var inp4 = row.cells[4].getElementsByTagName('input')[0];
      inp1.id = 'lmoname' + i;
      inp2.id = 'lmorisk_level' + i;
      inp3.id = 'lmoquantity' + i;
      inp4.id = 'lmovolume' + i;

  if (reset) {
    inp1.value = inp2.value = inp3.value = inp4.value = '';
  }
  return row;
}

Please help me understand where am i going wrong. Thank you.

via Chebli Mohamed