JSFiddle - React, Tailwind, and code Playground
HTML
<form>
<table id="vehicle" class="display" cellspacing="0" width="100%" style="text-align: center;">
<thead>
<tr>
<th>Reg No</th>
<th>Make</th>
<th>Colour</th>
<th>Chasis No</th>
<th>Mileage</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<?php
$vquery = "SELECT * FROM vehicle ORDER BY arrival_date ASC"; // query the person
$data = perform_query($db, $vquery);
foreach ($data as $d) {
$vid = $d['vid'];
$regNumber = strtoupper($d['reg_no']);
$model = ucfirst($d['make']);
$unit_price = $d['purchase_price'];
$colour = ucfirst($d['colour']);
$vin_no = strtoupper($d['chasis_no']); ?>
<tr>
<td><?php echo $regNumber; ?>BY658DN</td>
<td><?php echo $model; ?>Toyota</td>
<td><?php echo $colour; ?>White</td>
<td><?php echo $vin_no; ?>JNSAMPLESAMPLE</td>
<td><input type="text" name="quantity" style="width: 100%;"></td>
<td>
<select name="">
<option selected>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</td>
<td>
<input type="text" id="unit_price" name="unit_price" value='<?php echo "£" . $unit_price; ?>' style="width: 100%;">
</td>
<td><input type="radio" name="selectedVehicle"/></td>
</tr>
<?php
}
?>
...
JavaScript
rdoBoxes = document.getElementsByName("selectedVehicle");
for (var i = 0; i < rdoBoxes.length; i++) {
var rdoBox = rdoBoxes[i];
rdoBox.onclick = function() {
var currentRow = this.parentNode.parentNode;
var secondColumn = currentRow.getElementsByTagName("td")[0];
alert("You have selected Vehicle Reg No: " + secondColumn.textContent );
};
}