JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="l-form">
<form method="post" class="DA_custom_form" id="l-form" action="php/add.php">
<h3>Add</h3>
<label>Name</label>
<input type="text" class="field" id="l_name" name="l_name" />
<label>City</label>
<input type="text" class="field" id="l_city" name="l_city" />
<label>Phone</label>
<input type="text" class="field" id="l_phone" name="l_phone" />
<label>OP</label>
<div class="cl"> </div>
<input type="text" class="field" id="l_op" name="l_op" />
<label>Type</label>
<select class="select_field" id="l_type" name="l_type">
<option value=" ">Select type</option>
<option value="cu">Cu</option>
<option value="Ve">Ve</option>
<option value="Ex">Ex</option>
</select>
<div class="cl"> </div>
<div class="btnp">
<input type="submit" value="Save" name="submit" id="submit" />
</div>
</div>
</form>
</br>
</br>
<table id="existing" border=1>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>View/Edit</th>
</tr>
</thead>
<tbody>
<?php include 'php/db.php'; $result=m ysql_query( "SELECT * FROM yolo ORDER BY name ASC"); while( $row=m ysql_fetch_assoc( $result ) ){ ?>
<tr style:padding-left:10px;>
<td>
<?php echo $row[ 'name'] ?>sweet_name</td>
<td>
<?php echo $row[ 'type'] ?>VE</td>
<td style="display:none">
<?php echo $row[ 'city'] ?>dream_city</td>
<td style="display:none">
<?php echo $row[ 'phone'] ?>123456</td>
<td style="display:none">
<?php echo $row[ 'op'] ?>SWAG</td>
<td>
<button class="edit_button" value="Edit" name="button">Edit</button>
...
JavaScript
$("#existing").on("click", ".edit_button", function () {
var data = $(this).closest("td").siblings().map(function () {
return $(this).text();
}).toArray();
console.log(data);
}); // the event is not recognized. no action on clicking.