I am trying to insert a button when I am populate a table dynamically. I have the data that loads correctly the table and I am able to insert the button. When I click the button it displays the alert box just to check it's working. However when I try to get the data of the first cell of that row it gets the error that $ is not defined.
This is my code:
<?php
$file = 'data.json';
$data = file_get_contents($file);
$json = json_decode($data);
echo"<pre>";
print_r($json);
echo"</pre>";
?>
<form method="POST" action="">
<center><button class="btn btn-primary" name="display">Populate</button></center>
</form>
</div>
<table class="table table-bordered table-example">
<thead class="alert-info">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<?php
$url = 'data.json';
$data = file_get_contents($url);
$json = json_decode($data);
foreach($json as $member){
?>
<tr>
<td><?php echo $member->firstname?></td>
<td><?php echo $member->lastname?></td>
<td><?php echo $member->gender?></td>
<td><button class="btn btn-info button-details" onclick="myFunction()">>detalhes</button>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
<div class="col-md-6">
<?php include 'populate_json.php';?>
</div>
</div>
<script type="text/javascript">
function myFunction() {
alert("botao funciona");
$(".table-example").find("tr td:first"); *this is not working
}