Bootstrap - Selecting a quantity updates value of ALL the dropdowns
HTML
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="row">
<div class="col">
<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title">Selecting a quantity updates value of ALL the dropdowns</h1>
</div>
<div class="panel-body">
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th>Fruit Type</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>Plum</td>
<td>5</td>
<td>
<div class="btn-group" id ="Child">
<button type="button" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown">
<span data-bind="label">0</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a id="drpTicketNum" href="#">1</a></li>
<li><a id="drpTicketNum" href="#">2</a></li>
<li><a id="drpTicketNum" href="#">3</a></li>
<li><a id="drpTicketNum" href="#">4</a></li>
...
JavaScript
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
$(".dropdown-menu li a").click(function () {
var item = $(this).text();
var current_row = $(this).parent();
var current_btn = $(current_row).find(".btn:first-child");
console.log($(current_row));
$(current_btn).text(item);
$(current_btn).val(item);
});