0👍
✅
You are using plain js code which is not a problem but I’m going to give you a solution more vuejs oriented.
var vm = new Vue({
el: '#vue-app',
data : {
dependents: [{
dependent_id : 1,
dependent_first_name : "John",
dependent_middle_name : "Denver",
dependent_last_name : "Doe",
dependent_address : "USA",
dependent_contact_no : "431-431-431"
},
{
dependent_id : 2,
dependent_first_name : "John",
dependent_middle_name : "Denver",
dependent_last_name : "Doe",
dependent_address : "USA",
dependent_contact_no : "431-431-431"
},
{
dependent_id : 3,
dependent_first_name : "John",
dependent_middle_name : "Denver",
dependent_last_name : "Doe",
dependent_address : "USA",
dependent_contact_no : "431-431-431"
}],
selected: null
},
methods : {
isDisabled (index) {
if (this.selected === null) return false;
return index != this.selected;
},
innerText (index) {
if (index === this.selected) return 'selected';
return 'select';
},
backgroundColor (index) {
if (index === this.selected) return "background-color: green";
return "background-color: #cc0000";
},
makeBeneficiaryButton : function(index) {
this.selected = this.selected === null ? this.selected = index : null;
}
}
});<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
</head>
<body>
<div id="vue-app">
<button class="btn bg-success btn-sm text-light" href="#add" data-toggle="modal" data-target="#myModal11">Show Modal</button>
<div class="modal fade" id="myModal11" class="text-dark" tabindex="1"> <!-- start update modal -->
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title"></h4>
</div>
<!-- Modal body -->
<div class="modal-body" id="modal-medicine">
<table class="table table-responsive-sm table-hover table-bordered text-center mt-2">
<thead class="thead-info">
<tr>
<th>ID</th>
<th>Full Name</th >
<th>Address</th>
<th>Contact No</th>
<th>Action</th>
</tr>
</thead>
<tbody v-if="dependents.length > 0">
<tr v-for="(dependent, index) in dependents">
<td>{{dependent.dependent_id}}</td>
<td>{{dependent.dependent_first_name + " " + dependent.dependent_middle_name + " " + dependent.dependent_last_name}}</td>
<td>{{dependent.dependent_address}}</td>
<td>{{dependent.dependent_contact_no}}</td>
<td>
<button :id="index" @click="makeBeneficiaryButton(index)" :style="backgroundColor(index)" class="btn btn-sm text-light" class="btn bg-success btn-sm" :disabled="isDisabled(index)">{{ innerText(index) }}</button>
</td>
</tr>
</tbody>
<tbody v-else>
<tr>
<td colspan="12" style="font-size: 20px; text-align: center"><b>No dependent to show</b></td>
</tr>
</tbody>
</table>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">
<i class="far fa-save"> </i> Save
</button>
</div>
</div>
</div><!-- update modal end -->
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>Source:stackexchange.com