Insert html codes to html body using Javascript on laravel 7-CodePudding

I try to insert the html code to id=coordinatorform but when I run this blade file, nothing comes up just blank. Can I know what the problem is?

<body>
<div class="form-group row" id="coordinatorform"></div>
</body>
<script language="Javascript">

$(document).ready(function(){
  var count = 1;

  dynamic_field(count);

  function dynamic_field(number)
 {
  html = '<label class="col-sm-2 col-form-label">Coordinator</label>';
                    
  html  = '<div class="form-group"><select name="coordinator['   number   ']" class="form-control" required>option value="">--Select --</option>@foreach($coordinators as $coordinator)<option value="{{ $coordinator->id }}">{{ $coordinator->name }}</option>@endforeach</select></div>';
        
       if(number > 1)
        {
            html  = '<div class="ml-auto p-2"><button type="button" name="remove" id="" title="Delete" class="btn btn-danger remove">X</button></div>';
            $("#coordinatorform").append(html); 
            
        }
        else
        {   
            html  = '<div class="ml-auto p-2"><button type="button" name="add" id="add" title="Add" class="btn btn-success"> </button></div>';
            $("#coordinatorform").html(html);
        }           
 }

});

it works on older laravel version but not 7.

CodePudding user response：

You may be looking to change

<script language="Javascript">

<script type="text/Javascript"> or <script> src=javascript.js></script>

The language attribute it deprecated.

CodePudding user response：

I try it and it works for me in v7 and v8 add jquery.min.js library.

and try it like this it will work

<body>
    <div class="form-group row" id="coordinatorform"></div>
    <script 
     src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
    </script>

    <script language="Javascript">
    $(document).ready(function(){
    var count = 1;
    
   {{ your javascript code here }}
   });
</body>

let me know if it works.