Develop Reference

How to add numbers in a <td> to an array only if another <td> contains certain text

I'm trying to push some numbers that are outputted onto my table from my database to an array so I can get the sum of those numbers and then compare them to a different set of data. However, I only want to add numbers where the previous <td> contains text 'implementation'. So for example, in this HTML output I'm interested in the <td> with class sumCosts, but I only want to add the numbers where the first <td>, with the class costPhase, has text of 'implementation'. If you look at the last <tr>, the <td> with class costPhase contains text 'annual'. I want to omit that specific table data, where the number is 313, from my array.
<table class="table text-light">
<thead>
<tr class="text-end">
<th class="text-start" scope="col">Implementation or Annual</th>
<th class="text-start" scope="col">Category</th>
<th scope="col">Cost ($)</th>
<th scope="col">Hours</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
<tr class="text-end">
***<td class="text-start costPhase">implementation</td>***
<td class="text-start">emo</td>
***<td class="text-end sumCosts commas">4,091</td>***
<td class="text-end">85</td>
<td>
<a href="/find/costs_hours/1">
<button id="1" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/1">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
***<td class="text-start costPhase">implementation</td>***
<td class="text-start">analysts</td>
***<td class="text-end sumCosts commas">6,282</td>***
<td class="text-end">130.5</td>
<td>
<a href="/find/costs_hours/2">
<button id="2" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/2">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
***<td class="text-start costPhase">implementation</td>***
<td class="text-start">maintenance</td>
***<td class="text-end sumCosts commas">2,873</td>***
<td class="text-end">72.5</td>
<td>
<a href="/find/costs_hours/3">
<button id="3" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/3">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
***<td class="text-start costPhase">implementation</td>***
<td class="text-start">materials</td>
***<td class="text-end sumCosts commas">1,185</td>***
<td class="text-end"></td>
<td>
<a href="/find/costs_hours/4">
<button id="4" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/4">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
***<td class="text-start costPhase">annual</td>***
<td class="text-start">emo</td>
***<td class="text-end sumCosts commas">313</td>***
<td class="text-end"></td>
<td>
<a href="/find/costs_hours/5">
<button id="5" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/5">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
</table>
This is my current function set up. Right now it grabs all the values with class sumCosts
let costsArray = [];
$(".sumCosts").each(function () {
let values = parseInt($(this).text().replace(/,/g, ''));
costsArray.push(values);
});
console.log(costsArray)
This is what is logged to the console. (trying to omit 313)
(5) [4091, 6282, 2873, 1185, 313]
0: 4091
1: 6282
2: 2873
3: 1185
4: 313
length: 5
__proto__: Array(0)
I've tried using an if block with the selector :contains and costPhase.text() === 'implementation'
but neither of these seem to work. The .text() method logs an empty array and the :contains selector logs the same output as above from the original function.
if ($('.costPhase').text() === 'implementation') {
$(".sumCosts").each(function () {
let values = parseInt($(this).text().replace(/,/g, ''));
costsArray.push(values);
});
}
if ($('.costPhase:contains("implementation")')) {
$(".sumCosts").each(function () {
let values = parseInt($(this).text().replace(/,/g, ''));
costsArray.push(values);
});
}
If anyone has any advice on how to achieve this, it would be greatly appreciated! Thanks!

To build the array you can use map() to iterate through all the .costPhase elements which contain the word implementation. From there you can retrieve the sibling .sumCosts and add its value to the array.
To get the total of the values in the resulting array you can use reduce().
Try this:
let values = $('.costPhase:contains("implementation")').map((i, el) => parseInt($(el).siblings('.sumCosts').text().trim().replace(/,/g, ''), 10)).get();
let total = values.reduce((a, b) => a + b, 0);
console.log(values);
console.log(total);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table text-light">
<thead>
<tr class="text-end">
<th class="text-start" scope="col">Implementation or Annual</th>
<th class="text-start" scope="col">Category</th>
<th scope="col">Cost ($)</th>
<th scope="col">Hours</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
<tr class="text-end">
<td class="text-start costPhase">implementation</td>
<td class="text-start">emo</td>
<td class="text-end sumCosts commas">4,091</td>
<td class="text-end">85</td>
<td>
<a href="/find/costs_hours/1">
<button id="1" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/1">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
<td class="text-start costPhase">implementation</td>
<td class="text-start">analysts</td>
<td class="text-end sumCosts commas">6,282</td>
<td class="text-end">130.5</td>
<td>
<a href="/find/costs_hours/2">
<button id="2" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/2">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
<td class="text-start costPhase">implementation</td>
<td class="text-start">maintenance</td>
<td class="text-end sumCosts commas">2,873</td>
<td class="text-end">72.5</td>
<td>
<a href="/find/costs_hours/3">
<button id="3" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/3">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
<td class="text-start costPhase">implementation</td>
<td class="text-start">materials</td>
<td class="text-end sumCosts commas">1,185</td>
<td class="text-end"></td>
<td>
<a href="/find/costs_hours/4">
<button id="4" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/4">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
<td class="text-start costPhase">annual</td>
<td class="text-start">emo</td>
<td class="text-end sumCosts commas">313</td>
<td class="text-end"></td>
<td>
<a href="/find/costs_hours/5">
<button id="5" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/5">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
</table>

Regex on Javascript not working

I do a curl to a server to get the html data which I want to parse and store in a array.
I got this data
https://pastebin.com/7QB9BNut
Can anyone help me with regex to get and store the above data in array in this format.
[
["id","name","ip:port","map"]
]
example:
[
["1","Forever United","109.70.149.161:10480","Red Library Offices"],
["2","{KGB}Laura & Guns FuNHoUsE","63.141.226.61:9480","A-Bomb
Nightclub"],
and so on
]
Thanks

PasteBin wouldn't let me do an AJAX request because CORS so I had to dump the HTML in the script. But it seems to work.
let htmlString = `<tr>
<td>
1.
</td>
<td>
<a href="/search/swat4/">
<img src="/images/game_icons16/swat4.png" alt="SWAT4"/>
</a>
</td>
<td>
<a class="c03serverlink" href="/server_info/109.70.149.161:10480/">
Forever United
</a>
<a href="javascript:showPopupExternalLink('gt://joinGame:game=swat4&ip=109.70.149.161&port=10480');">
<img src="/images/global/btn_join.png" alt="Join"/>
</a>
</td>
<td>
16/18
</td>
<td>
</td>
<td>
<a href="/search/swat4/GB/">
<img src="/images/flags/gb.gif" alt="" class="item_16x11"/>
</a>
</td>
<td>
<span class="ip">109.70.149.161</span><span class="port">:10480</span>
</td>
<td>
Red Library Offices
</td>
</tr>
<tr>
<td>
2.
</td>
<td>
<a href="/search/swat4/">
<img src="/images/game_icons16/swat4.png" alt="SWAT4"/>
</a>
</td>
<td>
<a class="c03serverlink" href="/server_info/63.141.226.61:9480/">
{KGB}Laura & Guns FuNHoUsE
</a>
<a href="javascript:showPopupExternalLink('gt://joinGame:game=swat4&ip=63.141.226.61&port=9480');">
<img src="/images/global/btn_join.png" alt="Join"/>
</a>
</td>
<td>
12/16
</td>
<td>
</td>
<td>
<a href="/search/swat4/US/">
<img src="/images/flags/us.gif" alt="" class="item_16x11"/>
</a>
</td>
<td>
<span class="ip">63.141.226.61</span><span class="port">:9480</span>
</td>
<td>
A-Bomb Nightclub
</td>
</tr>
<tr>
<td>
3.
</td>
<td>
<a href="/search/swat4/">
<img src="/images/game_icons16/swat4.png" alt="SWAT4"/>
</a>
</td>
<td>
<a class="c03serverlink" href="/server_info/163.172.55.136:10480/">
-==MYT Team Svr==-
</a>
<a href="javascript:showPopupExternalLink('gt://joinGame:game=swat4&ip=163.172.55.136&port=10480');">
<img src="/images/global/btn_join.png" alt="Join"/>
</a>
</td>
<td>
16/16
</td>
<td>
</td>
<td>
<a href="/search/swat4/FR/">
<img src="/images/flags/fr.gif" alt="" class="item_16x11"/>
</a>
</td>
<td>
<span class="ip">163.172.55.136</span><span class="port">:10480</span>
</td>
<td>
Children of Taronne Tenement
</td>
</tr>
<tr>
<td>
4.
</td>
<td>
<a href="/search/swat4/">
<img src="/images/game_icons16/swat4.png" alt="SWAT4"/>
</a>
</td>
<td>
<a class="c03serverlink" href="/server_info/51.15.152.220:10480/">
-==MYT Team Svr==-
</a>
<a href="javascript:showPopupExternalLink('gt://joinGame:game=swat4&ip=51.15.152.220&port=10480');">
<img src="/images/global/btn_join.png" alt="Join"/>
</a>
</td>
<td>
16/16
</td>
<td>
</td>
<td>
<a href="/search/swat4/GB/">
<img src="/images/flags/gb.gif" alt="" class="item_16x11"/>
</a>
</td>
<td>
<span class="ip">51.15.152.220</span><span class="port">:10480</span>
</td>
<td>
Children of Taronne Tenement
</td>
</tr>
<tr>
<td>
5.
</td>
<td>
<a href="/search/swat4/">
<img src="/images/game_icons16/swat4.png" alt="SWAT4"/>
</a>
</td>
<td>
<a class="c03serverlink" href="/server_info/31.186.250.32:10480/">
WWW.KNIGHTofSORROW.IN (Antics)
</a>
<a href="javascript:showPopupExternalLink('gt://joinGame:game=swat4&ip=31.186.250.32&port=10480');">
<img src="/images/global/btn_join.png" alt="Join"/>
</a>
</td>
<td>
0/12
</td>
<td>
</td>
<td>
<a href="/search/swat4/DE/">
<img src="/images/flags/de.gif" alt="" class="item_16x11"/>
</a>
</td>
<td>
<span class="ip">31.186.250.32</span><span class="port">:10480</span>
</td>
<td>
Food Wall Restaurant
</td>
</tr>
<tr>
<td>
6.
</td>
<td>
<a href="/search/swat4/">
<img src="/images/game_icons16/swat4.png" alt="SWAT4"/>
</a>
</td>
<td>
<a class="c03serverlink" href="/server_info/158.58.173.64:16480/">
|SoH| Shadow Of Heroes
</a>
<a href="javascript:showPopupExternalLink('gt://joinGame:game=swat4&ip=158.58.173.64&port=16480');">
<img src="/images/global/btn_join.png" alt="Join"/>
</a>
</td>
<td>
12/14
</td>
<td>
</td>
<td>
<a href="/search/swat4/IT/">
<img src="/images/flags/it.gif" alt="" class="item_16x11"/>
</a>
</td>
<td>
<span class="ip">158.58.173.64</span><span class="port">:16480</span>
</td>
<td>
Children of Taronne Tenement
</td>
</tr>
<tr>
<td>
7.
</td>
<td>
<a href="/search/swat4/">
<img src="/images/game_icons16/swat4.png" alt="SWAT4"/>
</a>
</td>
<td>
<a class="c03serverlink" href="/server_info/houseofpain.tk:10480/">
WWW.HOUSEOFPAiN.TK (Antics)
</a>
<a href="javascript:showPopupExternalLink('gt://joinGame:game=swat4&ip=31.186.250.156&port=10480');">
<img src="/images/global/btn_join.png" alt="Join"/>
</a>
</td>
<td>
10/12
</td>
<td>
</td>
<td>
<a href="/search/swat4/NL/">
<img src="/images/flags/nl.gif" alt="" class="item_16x11"/>
</a>
</td>
<td>
<span class="ip">31.186.250.156</span><span class="port">:10480</span>
</td>
<td>
A-Bomb Nightclub
</td>
</tr>`;
let html = document.createElement('table');
html.innerHTML = htmlString;
let results = Array.from(html.querySelectorAll('tr')).map(row => Array.from(row.querySelectorAll('td')).map(cell => cell.innerText.trim()).filter(data => data != ''));
console.log(results);

Javascript doesn't work on blade laravel

I'm trying to create a table which I can delete a row by clicking a button on it's last cell but It doesn't work. I move it to a test project (without laravel), it works, but doesn't work on blade laravel. I have tried as many ways as I can but still couldn't figure it out.
<link rel="stylesheet" type="text/css" href=" {{asset('public/css/cart.css')}}">
<script type="text/javascript">
$("td.cart_delete").on("click", function () {
alert("On click");
$(this).closest("tr").remove();
});
</script>
#extends('layouts.layout')
#section('content')
<section id="cart_items">
<div class="container">
<div class="breadcrumbs">
<ol class="breadcrumb">
<li>Trang chủ</li>
<li class="active">Giỏ hàng</li>
</ol>
</div>
<div class="table-responsive cart_info">
<table class="table table-condensed">
<thead>
<tr class="cart_menu">
<td class="image">Mặt hàng</td>
<td class="description">Mô tả</td>
<td class="price">Giá</td>
<td class="quantity">Số lượng</td>
<td class="total">Thành tiền</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td class="cart_product">
<img src="images/cart/one.png" alt=""> <!-- Cái này chứa ảnh của sp -->
</td>
<td class="cart_description">
<h4>Tên sản phẩm</h4> <!-- Tên sản phẩm -->
<p><a>Phan Thanh Tuyên</a></p>
</td>
<td class="cart_price">
<p>120.000 VNĐ</p> <!-- Giá -->
</td>
<td class="cart_quantity"> <!-- Số lượng -->
<div class="cart_quantity_button">
<!-- <a class="cart_quantity_up" href=""> + </a> -->
<button class="add-btn">+</button>
<input class="cart_quantity_input" type="text" name="quantity" value="1" autocomplete="off" size="2" id="so_luong"> <!-- Đây cần thay đổi số lượng sản phẩm mua theo csdl -->
<!-- <a class="cart_quantity_down" href=""> - </a> -->
<button class="minus-btn">-</button>
</div>
</td>
<td class="cart_total">
<p class="cart_total_price">$59</p>
</td>
<td class="cart_delete">
<!-- <a class="cart_quantity_delete" href=""><i class="fa fa-times"></i></a> Đây là nút delete một sản phẩm trong giỏ hàng. Chưa biết nên để <button> hay <a>. Cái này tùy cách xử lý của ô -->
<button class="quantity_delete"><i class="fa fa-times"></i></button>
</td>
</tr>
<tr>
<td class="cart_product">
<img src="images/cart/two.png" alt="">
</td>
<td class="cart_description">
<h4>Colorblock Scuba</h4>
<p>Web ID: 1089772</p>
</td>
<td class="cart_price">
<p>$59</p>
</td>
<td class="cart_quantity">
<div class="cart_quantity_button">
<button class="add-btn">+</button>
<input class="cart_quantity_input" type="text" name="quantity" value="1" autocomplete="off" size="2">
<button class="minus-btn">-</button>
</div>
</td>
<td class="cart_total">
<p class="cart_total_price">$59</p>
</td>
<td class="cart_delete">
<!-- <a class="cart_quantity_delete" href=""><i class="fa fa-times"></i></a> -->
</td>
</tr>
<tr>
<td class="cart_product">
<img src="images/cart/three.png" alt="">
</td>
<td class="cart_description">
<h4>Colorblock Scuba</h4>
<p>Web ID: 1089772</p>
</td>
<td class="cart_price">
<p>$59</p>
</td>
<td class="cart_quantity">
<div class="cart_quantity_button">
<button class="add-btn">+</button>
<input class="cart_quantity_input" type="text" name="quantity" value="1" autocomplete="off" size="2">
<button class="minus-btn">-</button>
</div>
</td>
<td class="cart_total">
<p class="cart_total_price">$59</p>
</td>
<td class="cart_delete">
<!-- <a class="cart_quantity_delete" href=""><i class="fa fa-times"></i></a> -->
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section> <!--/#cart_items-->
<section id="do_action">
<div class="container">
<div class="row">
<!-- <div class="col-sm-6">
</div> -->
<div class="col-sm-6">
<div class="total_area">
<ul>
<li>Cart Sub Total <span>$59</span></li>
<li>Eco Tax <span>$2</span></li>
<li>Shipping Cost <span>Free</span></li>
<li>Total <span>$61</span></li>
</ul>
<a class="btn btn-default update" href="{{url('cart')}}">Update</a>
<a class="btn btn-default check_out" href="{{url('checkout')}}">Check Out</a>
</div>
</div>
</div>
</div>
</section><!--/#do_action-->
#endsection
Thanks for any help!

Assume you are jQuery is working.
Here it is,
<link rel="stylesheet" type="text/css" href=" {{asset('public/css/cart.css')}}">
#extends('layouts.layout')
#section('content')
<section id="cart_items">
<div class="container">
<div class="breadcrumbs">
<ol class="breadcrumb">
<li>Trang chủ</li>
<li class="active">Giỏ hàng</li>
</ol>
</div>
<div class="table-responsive cart_info">
<table class="table table-condensed">
<thead>
<tr class="cart_menu">
<td class="image">Mặt hàng</td>
<td class="description">Mô tả</td>
<td class="price">Giá</td>
<td class="quantity">Số lượng</td>
<td class="total">Thành tiền</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td class="cart_product">
<img src="images/cart/one.png" alt=""> <!-- Cái này chứa ảnh của sp -->
</td>
<td class="cart_description">
<h4>Tên sản phẩm</h4> <!-- Tên sản phẩm -->
<p><a>Phan Thanh Tuyên</a></p>
</td>
<td class="cart_price">
<p>120.000 VNĐ</p> <!-- Giá -->
</td>
<td class="cart_quantity"> <!-- Số lượng -->
<div class="cart_quantity_button">
<!-- <a class="cart_quantity_up" href=""> + </a> -->
<button class="add-btn">+</button>
<input class="cart_quantity_input" type="text" name="quantity" value="1" autocomplete="off" size="2" id="so_luong"> <!-- Đây cần thay đổi số lượng sản phẩm mua theo csdl -->
<!-- <a class="cart_quantity_down" href=""> - </a> -->
<button class="minus-btn">-</button>
</div>
</td>
<td class="cart_total">
<p class="cart_total_price">$59</p>
</td>
<td class="cart_delete">
<!-- <a class="cart_quantity_delete" href=""><i class="fa fa-times"></i></a> Đây là nút delete một sản phẩm trong giỏ hàng. Chưa biết nên để <button> hay <a>. Cái này tùy cách xử lý của ô -->
<button class="quantity_delete" id="c_delete"><i class="fa fa-times"></i></button>
</td>
</tr>
<tr>
<td class="cart_product">
<img src="images/cart/two.png" alt="">
</td>
<td class="cart_description">
<h4>Colorblock Scuba</h4>
<p>Web ID: 1089772</p>
</td>
<td class="cart_price">
<p>$59</p>
</td>
<td class="cart_quantity">
<div class="cart_quantity_button">
<button class="add-btn">+</button>
<input class="cart_quantity_input" type="text" name="quantity" value="1" autocomplete="off" size="2">
<button class="minus-btn">-</button>
</div>
</td>
<td class="cart_total">
<p class="cart_total_price">$59</p>
</td>
<td class="cart_delete">
<!-- <a class="cart_quantity_delete" href=""><i class="fa fa-times"></i></a> -->
</td>
</tr>
<tr>
<td class="cart_product">
<img src="images/cart/three.png" alt="">
</td>
<td class="cart_description">
<h4>Colorblock Scuba</h4>
<p>Web ID: 1089772</p>
</td>
<td class="cart_price">
<p>$59</p>
</td>
<td class="cart_quantity">
<div class="cart_quantity_button">
<button class="add-btn">+</button>
<input class="cart_quantity_input" type="text" name="quantity" value="1" autocomplete="off" size="2">
<button class="minus-btn">-</button>
</div>
</td>
<td class="cart_total">
<p class="cart_total_price">$59</p>
</td>
<td class="cart_delete">
<!-- <a class="cart_quantity_delete" href=""><i class="fa fa-times"></i></a> -->
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section> <!--/#cart_items-->
<section id="do_action">
<div class="container">
<div class="row">
<!-- <div class="col-sm-6">
</div> -->
<div class="col-sm-6">
<div class="total_area">
<ul>
<li>Cart Sub Total <span>$59</span></li>
<li>Eco Tax <span>$2</span></li>
<li>Shipping Cost <span>Free</span></li>
<li>Total <span>$61</span></li>
</ul>
<a class="btn btn-default update" href="{{url('cart')}}">Update</a>
<a class="btn btn-default check_out" href="{{url('checkout')}}">Check Out</a>
</div>
</div>
</div>
</div>
</section><!--/#do_action-->
<script type="text/javascript">
$("td.cart_delete").on("click", function () {
alert("On click");
$(this).closest("tr").remove();
});
</script>
#endsection
Before click,
After click

expand and collapse row for ng-table not working

I am trying to achieve an expand and collapse row for ng-table, basically what I want is if you click on row it expands with more detail.But currently all the rows get expanded on click. Does anyone know how to achieve this?
Any help appreciated thanks
<table ng-table="tableParams" class="table table-striped">
<tr ng-repeat-start="ticket in ng">
<td data-title="'Id'">{{ticket.requestId}}</td>
<td style="width:60%;" data-title="'Subject'" >{{ticket.subject}}</td>
<td data-title="'State'"><span ng-class="ticket.state+'Color'">{{ticket.state}}</span></td>
<td data-title="'Priority'">{{ticket.priority}}</td>
<td >
<a ui-sref="app.detail({id: ticket.requestId})" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
<!-- <a class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Expand" ng-click="toggleDetail($index);lastComment(ticket.requestId)"><i class="fa" >+/-</i></a>-->
<button ng-if="user.expanded" ng-click="user.expanded = false">-</button>
<button ng-if="!user.expanded" ng-click="user.expanded = true">+</button>
</td>
</tr>
<tr ng-if="user.expanded" ng-repeat-end="" >
<td colspan="8" >Test</td>
</tr>
</table>

You have to put your variable expanded for your line instead of a general var. It means that it won't be user.expanded but it have to be ticket.expanded
<table ng-table="tableParams" class="table table-striped">
<tr ng-repeat-start="ticket in ng">
<td data-title="'Id'">{{ticket.requestId}}</td>
<td style="width:60%;" data-title="'Subject'" >{{ticket.subject}}</td>
<td data-title="'State'"><span ng-class="ticket.state+'Color'">{{ticket.state}}</span></td>
<td data-title="'Priority'">{{ticket.priority}}</td>
<td >
<a ui-sref="app.detail({id: ticket.requestId})" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
<!-- <a class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Expand" ng-click="toggleDetail($index);lastComment(ticket.requestId)"><i class="fa" >+/-</i></a>-->
<button ng-if="ticket.expanded" ng-click="ticket.expanded = false">-</button>
<button ng-if="!ticket.expanded" ng-click="ticket.expanded = true">+</button>
</td>
</tr>
<tr ng-if="ticket.expanded" ng-repeat-end="" >
<td colspan="8" >Test</td>
</tr>
</table>
Working Fiddle

Collapsible table change chevron icon on click

I'm working on a table which contains hidden details for each row. Table rows are made with Bootstrap accordion.
Accordion rows and hidden details are working fine but the JS that changes the chevron icon when toggling [collapsed/expanded] is not working properly. It should change the chevron icon just on the clicked row but currently it changes the chevron icon for all rows.
I have read some related posts regarding my question and have tried them all but I'm unable to get it working. What I'm missing?
There is a Bootply Demo here
HTML
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1><i class="fa fa-file-text"></i> Maintenance Work Requests <small>List</small></h1>
<ol class="breadcrumb">
<li><i class="fa fa-home"></i> Home</li>
<li class="active">Listado de Solicitudes</li>
</ol>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-wrench"></i> Maintenance Work Requests</h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table id="solicitudes" class="table table-bordered table-hover table-striped tablesorter" style="vertical-align:middle; border-collapse:collapse">
<thead>
<tr>
<th class="header" style="text-align:center"></th>
<th class="header" style="text-align:center"># <i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Títle <i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Component<i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Created <i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Type<i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Approved By<i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Status <i class="fa fa-sort"></i></th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#1" class="accordion-toggle" style="cursor:pointer">
<td style="text-align:center"><i class="fa fa-plus-square"></i></td>
<td style="text-align:center">3325</td>
<td>Trabajo sobre Sistema Eléctrico</td>
<td>710.100.00.00 - Sistema Eléctrico</td>
<td style="text-align:center">2014/05/24</td>
<td><p class="text-info" style="text-align:center"><b>Solicitud</b></p></td>
<td style="text-align:center"></td>
<td class="info" style="text-align:center"><span class="label label-primary" style="font-size:small">Creada <i class="fa fa-bolt"></i></span></td>
</tr>
<tr>
<td colspan="8" class="hiddenRow">
<div class="accordion-body collapse" id="1">
<div class="bs-callout bs-callout-info" style="margin:0px;">
<h4><i class="fa fa-info"></i> Detalles</h4>
<p>
Details for row #1
</p>
</div>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#2" class="accordion-toggle" style="cursor:pointer">
<td style="text-align:center"><i class="fa fa-plus-square"></i></td>
<td style="text-align:center">3324</td>
<td>AVERIA: Correa transmisión Motor Aux</td>
<td>620.100.20.00 - Transmisión</td>
<td style="text-align:center">2014/05/01</td>
<td style="text-align:center"><p class="text-danger"><b>Avería</b></p></td>
<td style="text-align:center">Supervisor Mantenimiento</td>
<td class="success" style="text-align:center"><span class="label label-success" style="font-size:small">Aceptada <i class="fa fa-thumbs-o-up"></i></span></td>
</tr>
<tr>
<td colspan="8" class="hiddenRow">
<div class="accordion-body collapse" id="2">
<div class="bs-callout bs-callout-info" style="margin:0px;">
<h4><i class="fa fa-info"></i> Detalles</h4>
<p>
Details for row #2
</p>
</div>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#3" class="accordion-toggle" style="cursor:pointer">
<td style="text-align:center"><i class="fa fa-plus-square"></i></td>
<td style="text-align:center">3327</td>
<td>Revisión Panel Eléctrico</td>
<td>710.100.60.10 - Panel Nº 1</td>
<td style="text-align:center">2014/04/27</td>
<td style="text-align:center"><p class="text-info"><b>Solicitud</b></p></td>
<td style="text-align:center"></td>
<td class="warning" style="text-align:center"><span class="label label-warning" style="font-size:small">Revisión <i class="fa fa-eye"></i></span></td>
</tr>
<tr>
<td colspan="8" class="hiddenRow">
<div class="accordion-body collapse" id="3">
<div class="bs-callout bs-callout-info" style="margin:0px;">
<h4><i class="fa fa-info"></i> Detalles</h4>
<p>
Details for row #3
</p>
</div>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#4" class="accordion-toggle" style="cursor:pointer">
<td style="text-align:center"><i class="fa fa-plus-square"></i></td>
<td style="text-align:center">3323</td>
<td>Chequeo cableado catenaria</td>
<td>320.200.60.30 - Catenaria</td>
<td style="text-align:center">2014/04/26</td>
<td style="text-align:center"><p class="text-info"><b>Solicitud</b></p></td>
<td style="text-align:center"></td>
<td class="danger" style="text-align:center"><span class="label label-danger" style="font-size:small">Rechazada <i class="fa fa-thumbs-o-down"></i></span></td>
</tr>
<tr>
<td colspan="8" class="hiddenRow">
<div class="accordion-body collapse" id="4">
<div class="bs-callout bs-callout-info" style="margin:0px;">
<h4><i class="fa fa-info"></i> Detalles</h4>
<p>
Details for row #4
</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div><!-- /.row -->
<div>
<p><button type="button" onclick="location.href='#Url.Action(" index",="" "maintworequests",="" null)';return="" false;"="" class="btn btn-primary btn-lg" style="font-size: 25px"><i class="fa fa-mail-reply"></i> Volver</button></p>
</div>
</div><!-- /#page-wrapper -->
JS
$('tr').on('shown.bs.collapse', function(){
$(this).parent().find(".fa-plus-square").removeClass("fa-plus-square").addClass("fa-minus-square");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".fa-minus-square").removeClass("fa-minus-square").addClass("fa-plus-square");
});

Change your .parent() to .prev() or .prev('tr')
$('tr').on('shown.bs.collapse', function(){
$(this).prev('tr').find(".fa-plus-square").removeClass("fa-plus-square").addClass("fa-minus-square");
}).on('hidden.bs.collapse', function(){
$(this).prev('tr').find(".fa-minus-square").removeClass("fa-minus-square").addClass("fa-plus-square");
});

This should work:
$(".accordion-toggle").on("click", function () {
if($(this).find(".fa").hasClass("fa-plus-square")) {
$(this).find(".fa").removeClass("fa-plus-square").addClass("fa-minus-square");
} else {
$(this).find(".fa").removeClass("fa-minus-square").addClass("fa-plus-square");
}
});