Uncaught ReferenceError: myFunction is not defined at HTMLButtonElement.onclick

In my Laravel-5.8, I am applying JQuery:

    <div id="myNotice" class="container-fluid">

            <div style="margin-bottom: 10px;" class="row">
                <div class="col-lg-12" >
                    <button type="button" onclick="myFunction()" class="btn btn-block btn-info">
                        <i class="fas fa-arrow-right"></i> 
                            <span >Proceed</span>
                    </button>
                </div>
            </div>   
    </div>


  <div id="myMSF" class="container-fluid" style="display:none">
                 <table id="msfTable" class=" table table-bordered table-striped table-hover datatable">
                        <thead>
                            <tr>
                                <th scope="col" width="4%">ID</th>
                                <th scope="col" width="25%">Core Value<span style="color:red;">*</span></th>                                    
                                <th scope="col" width="25%">Rating<span style="color:red;">*</span></th>                                    
                                <th scope="col" width="46%">Comment</th>
                            </tr>
                        </thead> 
                        <tbody class="resultbody">

                        </tbody>
                    </table>  
  </div>

JQuery

<script type="text/javascript">
  $(document).ready(function() {  
         //Try to get tbody first with jquery children. works faster!
     var tbody = $('#msfTable').children('tbody');
     
     //Then if no tbody just select your table 
     var table = tbody.length ? tbody : $('#msfTable');
     $('[name=count_skills_no]').text();

  function myFunction() {
    var x = document.getElementById("myMSF");
    var y = document.getElementById("myNotice");
    if (x.style.display === "none") {
      x.style.display = "block";
      y.style.display = "none";
    } else {
      x.style.display = "none";
      y.style.display = "block";
    }
     var nx = ($('.resultbody tr').length - 0) + 1;
     var num_rows = $("#msfTable tbody tr").length + 1; 
    var rows = $('[name=count_skills_no]').val() - 1;
    var sn;
    for (var i = 0; i < rows; i++) {
        sn = num_rows + i;
     //Add row
     table.append('<tr>\n' +
                        '<td class="no">' + sn + '</td>\n' +
                        '        <td><select class="form-control select2bs4" data-placeholder="Choose Employee Type" tabindex="1" name="appraisal_skill_id[]" required>\n' +
                        '             <option value="0" selected="true" disabled="true">Select Core Value</option>\n' +
                        '              @if($skills->count() > 0 )\n' +
                        '                 @foreach($skills as $skill)\n' +
                        '                 <option value="{{$skill->id}}">{{$skill->skill_name}}</option>\n' +
                        '                 @endforeach\n' +
                        '             @endif\n' +
                        '         </select></td>\n' +
                        '        <td><select class="form-control select2bs4" data-placeholder="Choose Rating" tabindex="1" name="appraisal_respondent_rating_id[]" required>\n' +
                        '             <option value="0" selected="true" disabled="true">Select Rating</option>\n' +
                        '              @if($ratings->count() > 0 )\n' +
                        '                 @foreach($ratings as $rating)\n' +
                        '                 <option value="{{$rating->id}}">{{$rating->rating_value}} - {{$rating->rating_name}}</option>\n' +
                        '                 @endforeach\n' +
                        '             @endif\n' +
                        '         </select></td>\n' +
                        '   <td><input type="text" name="comment[]" placeholder="Enter comment here" class="form-control comment" required></td>\n' +
    '</tr>');
     }
  }
  });
 </script>

By default

<div id="myMSF" class="container-fluid" style="display:none"> 

is hidden while

<div id="myNotice" class="container-fluid"> 

is visible.

                    <button type="button" onclick="myFunction()" class="btn btn-block btn-info">
                        <i class="fas fa-arrow-right"></i> 
                            <span >Proceed</span>
                    </button>

is to display myMSF and hide. Also it creates tbody of the table

When the button proceed is onclick, I got this error:

Uncaught ReferenceError: myFunction is not defined at HTMLButtonElement.onclick

and this code is highlighted

 <button type="button" onclick="myFunction()" class="btn btn-block btn-info">

How do I resolve it?

Thanks