JSFiddle - React, Tailwind, and code Playground
HTML
<div class="esco_electric
">
<div class="esco_lower-wrapper">
<div class="esco_rates-list" id="electric_list">
<div class="rate-item row-id-Electric-' . $oneplan->ProductId . '-' . $oneplan->UtilityID . ' color3" data-product-id="' . $oneplan->ProductId . '" data-utility-id="' . $oneplan->UtilityID . '" data-tpv-id="' . $oneplan->TPVTemplateID . '" data-utility-name="' . $oneplan->UtilityShortName . '"
data-zone="">
<!-- Price / Suffix / Plan Type -->
<div class="rate-type rate-wrapper">
<div class="rate-price" style="position:relative;">
<div class="mobleft" style="margin-bottom: 0px;">Fixed Rate</div>
<div id="pricediv-Electric-1853-50" class="price v-ratePlanValue mobcenter" style="padding-top:5px;">7.4<span style="font-size:0.7em;">¢</span></div>
<div class="price-suffix v-rateMeasurementSuffix mobright">
kWh </div>
</div>
</div>
<!-- Description Area -->
<div class="rate-description description-wrapper">
<!-- Upper Description -->
<div class="description-text">
<div class="term-title">Term</div>
<div class="term-description">
6 Months </div>
<div class="description-contentpricediv-Electric-1853-50 v-ratePlanDescription">
No Cancellation Fee </div>
</div>
</div>
<div class="rate-description estimatedbill-wrapper">
<div class="description-text">
<div class="estimatedbill-title">Estimated Bill</div>
<div class="term-description">
$148 </div>
<div...
JavaScript
$(document).ready(function() {
var newBill;
$(".v-ratePlanValue").each(function() {
var originalRate = $(this).text().replace("¢", "");
console.log(this, originalRate);
newBill = '$' + ((parseFloat(originalRate) * 500) + 5.95);
});
$(this).find(".estimatedbill-wrapper .term-description").text(newBill)
});