We Keep Coding

.closest() not working on jquery when applied to on change event

I have a table like this
<table style="width:100%">
<tr>
<th>Downpayment (%)</th>
<th>Downpayment (₱)</th>
<th>Balance</th>
<th>Payment Period (Months)</th>
<th>MA 1 - XX</th>
<th>MA 1 - XX (VAT)</th>
</tr>
<tr>
<td class="dp-perce" data-perce="0">0%</td>
<td class="dp-peso"></td>
</tr>
<tr>
<td class="dp-perce" data-perce="15">15%</td>
<td class="dp-peso"></td>
</tr>
<tr>
<td class="dp-perce" data-perce="30">30%</td>
<td class="dp-peso"></td>
</tr>
<tr>
<td class="dp-perce" data-perce="50">50%</td>
<td class="dp-peso"></td>
</tr>
<tr>
<td class="dp-perce" data-perce="95">95%</td>
<td class="dp-peso"></td>
</tr>
</table>
whenever I use closest(), it is always returning null. what seems to be the problem?
here is my jquery:
<script>
$('#unit-type').on('change', function() {
$('.dp-peso').each(function(){
var percentage = $(this).closest('td').find('.dp-perce').data('perce');
$(this).text(percentage);
});
});
</script>
what this script is doing is to get the value of data-attribute of the closest dp-perce then display to class name dp-peso.
please let me know the bug. I've been stuck here for a long time/

HTML: How to split list (of <tr>-s) into multiple chunks with keeping the header?

I have a list that is too long, and it is needed to fit without scrolling, but I can't figure out how to split this into 2 or 3 or 4 chunks. I copied a list below, the real list is having 200 or more rows of data. Let's say I'd like to have chunks with no more than 3 rows inside.
Is it possible to make more than one chunk of this and keeping the header too?
(The data comes from an SQL selection and constantly changing).
<div id="FIller1" class="dbtable">
<thead>
<tr>
<td class="b3">Filled ID1</td>
<td class="n3">Filled ID2</td>
<td class="n3">Filled ID3</td>
</tr>
</thead>
<tbody>
<tr>
<td class="index"><span>110</span></td>
<td class="n2"><span>110-2</span></td>
<td class="b2"><span>AAA</span></td>
</tr>
<tr>
<td class="index"><span>111</span></td>
<td class="n2"><span>111-2</span></td>
<td class="b2"><span>BBB</span></td>
</tr>
<tr>
<td class="index"><span>112</span></td>
<td class="n2"><span>112-2</span></td>
<td class="b2"><span>CCC</span></td>
</tr>
<tr>
<td class="index"><span>113</span></td>
<td class="n2"><span>113-2</span></td>
<td class="b2"><span>DDD</span></td>
</tr>
<tr>
<td class="index"><span>114</span></td>
<td class="n2"><span>114-2</span></td>
<td class="b2"><span>EEE</span></td>
</tr>
<tr>
<td class="index"><span>115</span></td>
<td class="n2"><span>115-2</span></td>
<td class="b2"><span>FFF</span></td>
</tr>
<tr>
<td class="index"><span>116</span></td>
<td class="n2"><span>116-2</span></td>
<td class="b2"><span>GGG</span></td>
</tr>
</tbody>
</div>

Get specific HTML table element with google script

I've been looking for this same question but none of them seems to have an accurate answer.
I think this should be simpler, I want to get a specific cell from an HTML table in a website using google script.
It needs to work inside google script so pls dont suggest =importhtml, although that's exactly the function I'm looking for.
This is a website example https://prestadores.pami.org.ar/result.php?c=6-2-1-1&beneficio=110313900302&parent=00&vm=2
I need to get the date next to the FECHA DE NACIMIENTO cell, but I dont want to do messy things like indexOf since I have to do it with a few more values.
<table width="480" border="0" cellpadding="3" style="margin-left: 40px;">
<tbody><tr>
<td class="gris"><p>APELLIDO Y NOMBRE:</p></td>
<td class="grisClaro"><p>PEREZ JUANA ANTONIA </p></td>
</tr>
<tr>
<td class="gris"><p>TIPO BENEFICIARIO:</p></td>
<td class="crema"><p>JUBILACION</p></td>
</tr>
<tr>
<td class="gris"><p>N? BENEFICIO:</p></td>
<td class="grisClaro"><p>110313900302</p></td>
</tr>
<tr>
<td class="gris"><p>FECHA DE NACIMIENTO:</p></td>
<td class="crema"><p>08/03/1922</p></td>
</tr>
<tr>
<td class="gris"><p>NACIONALIDAD:</p></td>
<td class="grisClaro"><p>ARGENTINA</p></td>
</tr>
<tr>
<td class="gris"><p>PAIS:</p></td>
<td class="crema"><p>ARGENTINA</p></td>
</tr>
<tr>
<td class="gris"><p>UGL:</p></td>
<td class="crema"><p>LANUS</p></td>
</tr>
<tr>
<td class="gris"><p>DOCUMENTO:</p></td>
<td class="grisClaro"><p>DNI123456</p></td>
</tr>
<tr>
<td class="gris"><p>SEXO:</p></td>
<td class="crema"><p>FEMENINO</p></td>
</tr>
<tr>
<td class="gris"><p>ESTADO CIVIL:</p></td>
<td class="grisClaro"><p>SEPARADO/A LEGAL</p></td>
</tr>
<tr>
<td class="gris"><p>VENCIMIENTO AFILIACION:</p></td>
<td class="crema"><p></p></td>
</tr>
<tr>
<td class="gris"><p>UNIDAD OPERATIVA:</p></td>
<td class="grisClaro"><p>NO ASIGNADA</p></td>
</tr>
<tr>
<td class="gris"><p>ALTA:</p></td>
<td class="crema"><p>01/09/1982</p></td>
</tr>
<tr>
<td class="gris"><p>BAJA:</p> </td>
<td class="grisClaro"><p>10/10/2013</p></td>
</tr>
<tr>
<td class="gris"><p>OTRA OBRA SOCIAL:</p></td>
<td class="crema"><p>NO</p></td>
</tr>
</tbody></table>
Any suggestions?

Using jQuery's contains selector, it can be done like the following easily.
let td = $('table td.gris:contains("FECHA DE NACIMIENTO")');
console.log(td);
let theDate = td.next('td').text();
console.log(theDate);

Aligning data vertically in td elements for horizontally connected rows using jquery

I've html in the below format.
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head>
<script type="text/javascript">
$(document).ready(function(){
var dups = $('.comps + .comps');
dups.remove();
});
var list1 = [1,2,3,4,5,6];
var list2 = [6,5,4,3,2,1];
</script>
<div class="serverSet">
<h2>JH Storefront servers</h2>
<table border="1" class="CSSTableGenerator" class="myTable">
<tr>
<th>Component</th>
<th>Properties</th>
<th class="servers"> lqwasc10 </th>
<th class="servers"> lqwasc11 </th>
</tr>
<tr>
<td class="comps">DeliveryMethodsRepository</td>
<td class="props">externalCacheBatchInfoSize</td>
<tr/>
<tr/>
<td class="comps">InventoryManager</td>
<td class="comps">InventoryManager</td>
<td class="props">itemType</td>
</tr>
<tr>
<td class="comps">InventoryManager</td>
<td class="props">maxConcurrentUpdateRetries</td>
</tr>
<tr>
<td class="comps">CatalogTools</td>
<td class="comps">CatalogTools</td>
<td class="props">queryASAFFabrics</td>
</tr>
<tr>
<td class="comps">CatalogTools</td>
<td class="props">loggingDebug</td>
</tr>
<tr>
<td class="comps">CatalogTools</td>
<td class="props">outOfStockCode</td>
</tr>
<tr>
</table>
</div>
In the above jquery function, list1 and list2 are horizontally connected to lqwasc10 and lqwasc11 respectively. Is there a way I can align list1 and list2 vertically along with existing td elements of Components and Properties in their respective orders.
I've tried a lot and couldn't get hold of the logic. It would be great if someone can answer.
I'm expecting data in the format as shown in the screenshot.

You can merely add the desired <td>s just after removing duplicates, like this:
var list1 = [1,2,3,4,5,6];
var list2 = [6,5,4,3,2,1];
$(document).ready(function(){
$('.comps + .comps').remove();
$('.myTable tr').each(function(i) {
if (i > 0) {
$(this)
.append('<td>' + list1[i - 1] + '</td>')
.append('<td>' + list2[i - 1] + '</td>');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="serverSet">
<h2>JH Storefront servers</h2>
<table border="1" class="myTable">
<tr>
<th>Component</th>
<th>Properties</th>
<th class="servers"> lqwasc10 </th>
<th class="servers"> lqwasc11 </th>
</tr>
<tr>
<td class="comps">DeliveryMethodsRepository</td>
<td class="props">externalCacheBatchInfoSize</td>
</tr>
<tr>
<td class="comps">InventoryManager</td>
<td class="comps">InventoryManager</td>
<td class="props">itemType</td>
</tr>
<tr>
<td class="comps">InventoryManager</td>
<td class="props">maxConcurrentUpdateRetries</td>
</tr>
<tr>
<td class="comps">CatalogTools</td>
<td class="comps">CatalogTools</td>
<td class="props">queryASAFFabrics</td>
</tr>
<tr>
<td class="comps">CatalogTools</td>
<td class="props">loggingDebug</td>
</tr>
<tr>
<td class="comps">CatalogTools</td>
<td class="props">outOfStockCode</td>
</tr>
</table>
</div>
Please note that this snippet works only after correcting HTML errors: <tr> inconsistency (already noticed by comments), duplicate class attribute on <table>.

jQuery Text Replace

Have some text that needs to be replaced, searched around this website for all results with similar titles and no luck.
Currently the text is Handling Fee: and I need it to say Shipping Insurance: - Please Help!
Here's the html output of the page;
<div class="c3 right">
<h2>Order Summary</h2>
<table class="styledtable">
<thead>
<tr>
<th>Quantity</th>
<th>Product</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">1</td>
<td><strong>ACT Clutch Kit - Heavy Duty (HD) (DC1-HDSS)</strong>
<div class="order_item_notes">HD Clutch Kit<br/> Performance Street Disc (SS)</div>
<div class="order_item_specs">
Components : D018, 3001532, ATCP23<br/>
</div>
</td>
<td style="text-align:right">$314.25</td>
<td style="text-align:right">$314.25</td>
</tr>
<tr>
<td colspan="3" style="text-align:right">Items Total</td>
<td style="text-align:right">$<span id="itemstotal">314.25</span></td>
</tr>
<tr>
<td colspan="3" style="text-align:right">Shipping:</td>
<td style="text-align:right">$<span id="shippingtotal">TBD</span></td>
</tr>
<tr>
<td colspan="3" style="text-align:right">Handling Fee:</td>
<td style="text-align:right">$<span id="handlingfee">0.00</span></td>
</tr>
<tr>
<td colspan="3" style="text-align:right">Tax:</td>
<td style="text-align:right">$<span id="taxtotal">0.00</span></td>
</tr>
<tr>
<td colspan="3" style="text-align:right">Order Total:</td>
<td style="text-align:right">$<span id="total">0.00</span></td>
</tr>
</tbody>
</table>
<p>Upon checkout, you <strong>must enter</strong> your cars <strong>year, make and model</strong> into the comments section at the bottom of this page. <strong> We will not complete your order if we do not have this information!</strong></p>
<p> </p>
</div>
</div>

You can use a jQuery :contains selector:
$("td:contains('Handling Fee:')").text("Shipping Insurance:");
You can see it in action here: http://jsfiddle.net/cnhYj/
Update
in order to get it to work after the document is ready you can write it like that:
$(function() {
$("td:contains('Handling Fee:')").text("Shipping Insurance:");
});

$("td:contains('Handling Fee:').text('Shipping Insurance');

I don't see any javascript there just html
you want to turn this..
<td colspan="3" style="text-align:right">Handling Fee:</td>
into this...
<td colspan="3" style="text-align:right">Shipping Insurance:</td>