modal code is not working when appended through js in materialize

Question

I am trying to open a modal with a click on the icon.This icon is generated by js in table with respective data but it doesn't work

but when I copy-paste same code in blade.php file it works fine.

I am attaching screenshots as well. hope could get an answer.

note: using laravel

function actionFormatter(value, row, index) {
    	    if (row.status == '1') {


    	        return [
    	            
    	            '<a class="editGreenColor tooltipped modal-trigger"   data-tooltip="Edit" href="#modal5">',
    	            '<i title="Edit" class="mdi-content-create small fontSzie1pt5rm"></i>',
    	            '</a> ',
    	            
    	            
    	        ].join('');
    	    }
    	}

<table data-toolbar="#toolbar" class="table table-striped table-bordered bootstrap-table" data-unique-id="id" 	
data-toggle="table" data-url="{{url('/branches/')}}/{{ $prantId }}/get" style="font-size: 14px" data-filter-control="true" data-row-style="rowStyle" 
id="branchTable" data-pagination="true">
<thead>
  <tr>
   <th data-field="id" data-align="center" data-width="5%" data-sortable="true">ID</th>
   
   <th id="name" data-field="name" data-width="25%" data-sortable="true" data-formatter="allBranchViewFormatter">Name</th>

   <th data-field="id" data-formatter="actionFormatter" >Actions</th>
 </tr>
</thead>
</table>










<div id="modal5" class="modal bottom-sheet">

// some codes

</div>

screenshot1

screenshot2

Answer 1

I solved this by adding an onClick function, thanks for help @cris

function openEdit() {

  $(".modal").openModal()
}

<a class="editGreenColor tooltipped modal-trigger" data-tooltip="Edit" href="javascript:void(0)" onclick="openEdit()">
  <i title="Edit" class="mdi-content-create small fontSzie1pt5rm"></i>