Jump to a specific tab in WordPress - php

Question

I have a code which works on my localhost but does not work when I implement it on my live site, which is hosted on WordPress.
I have the below code on another page:
<div class="smaller-col col-xs-6 col-md-3 product-thumb">
<a href='<?php echo "/the-pods#{$product_id}"; ?>' target="_blank" class="thumbnail">
<img class="img-responsive animated pulse eds-on-hover" src="<?php echo $product_image; ?>" width="120" height="120" alt="Hello Paisa">
</a>
<p><?php echo $product_tagline; ?></p>
</div>
The above page links to the page with the code below:
<div id="exTab1" class="">
<ul class="nav nav-pills">
<?php
$counter = 0; while($products->fetch()):
$product_id = $products->field('product_id');
$product_image = wp_get_attachment_url($products->get_field('product_logo.ID'));
?>
<li class="<?php if($counter == 0){ echo 'active'; } ?>">
<a href='<?php echo "#$product_id"; ?>' data-toggle="tab">
<img class="img-responsive" src="<?php echo $product_image; ?>"/>
</a>
</li>
<?php $counter++; endwhile; ?>
</ul>
<div class="tab-content">
<?php
$counter_2 = 0; while($products_2->fetch()):
$product_id_2 = $products_2->field('product_id');
$product_image_2 = wp_get_attachment_url($products_2->get_field('product_logo.ID'));
$product_desc_2 = $products_2->field('product_description');
$product_website_2 = $products_2->field('product_website');
?>
<div class="tab-pane <?php if($counter_2 == 0){ echo 'active'; } ?> fade in" id="<?php echo $product_id_2; ?>">
<?php echo '#' . $product_image_2; ?>
<?php echo "<p style='color:#777;'>" . $product_desc_2 . "</p>";?>
<?php echo $product_website_2; ?>
</div>
<?php $counter_2++; endwhile; ?>
</div>
</div>
<script>
var tabUrl = document.location.toString();
if(tabUrl.match('#')) {
$('.nav-pills a[href="#' + tabUrl.split('#')[1] + '"]').tab('show');
}
$('#nav-pills a').on('shown.bs.tab', function(e) {
window.location.hash = e.target.hash;
});
</script>
How do I implement the navigation part properly on Wordpress?