JSFiddle - React, Tailwind, and code Playground

HTML

<div class="clearfix card-prod ">
<div class="top-dets">
<span class="card-title">UK Fuels Fuel Card</span>
<span class="srch-val-">900 Sites</span>
<span class="srch-val-1">Fixed Commercial Pricing</span>
<span class="srch-val-2">Free</span>
<span class="srch-val-3">Diesel, Lube &amp; Ad Blue Services</span>
</div>
    <a href="#"><img alt="Fuel Card" src="http://www.placehold.it/200x200"></a>
<p><span class="benefits-title">Key Benefits!</span><a href="?p=49">Continue reading</a></p>
</div>



<div class="clearfix card-prod ">
<div class="top-dets">
<span class="card-title">UK Fuels Fuel Card</span>
<span class="srch-val-">900 Sites</span>
<span class="srch-val-1">Fixed Commercial Pricing</span>
<span class="srch-val-2">Free</span>
<span class="srch-val-3">Diesel, Lube &amp; Ad Blue Services</span>
</div>
    <a href="#"><img alt="Fuel Card" src="http://www.placehold.it/200x200"></a>
<p><span class="benefits-title">Key Benefits!</span><a href="?p=44449">Continue reading</a></p>
</div>




<div class="clearfix card-prod ">
<div class="top-dets">
<span class="card-title">UK Fuels Fuel Card</span>
<span class="srch-val-">900 Sites</span>
<span class="srch-val-1">Fixed Commercial Pricing</span>
<span class="srch-val-2">Free</span>
<span class="srch-val-3">Diesel, Lube &amp; Ad Blue Services</span>
</div>
    <a href="#"><img alt="Fuel Card" src="http://www.placehold.it/200x200"></a>
<p><span class="benefits-title">Key Benefits!</span><a href="?p=339">Continue reading</a></p>
</div>

CSS

// Where <a href="#"><img alt="Fuel Card" src="http://www.placehold.it/200x200"></a>

is linking to itself '#', Id like to take the link after that ie '<a href="?p=49">' and make that the link

JavaScript

$("img").each(function() {
    var src = $(this).attr("src"); //take out the src
    $(this).wrap($('<a href="'+src+'" />')); //wrap around it with the anchor

});