Do not show content while the page is loading and wrong script working

Question

I faced a following problem: I have a simple selector where user can choose the selector's option. This action triggers my script and and the user is shown the content, depending on the option selected. The problem is that firstly, I see all the hidden content while the page loads (screenshot attached). Secondly, for some reason, the content for pr-btn (Add to cart) began to be shown completely. What am I doing wrong? I'm absolutely dummy in javascript, so I will be very grateful to the help.

jQuery(function () {
  jQuery('.pr-price').hide();
  jQuery('.d2').show();
  jQuery('#select').on("change",function () {
    jQuery('.pr-price').hide();
    jQuery('.d'+jQuery(this).val()).show();
  }).val("2");
  jQuery('#select').on("change",function () {
    jQuery('.pr-btn').hide();
    jQuery('.b'+jQuery(this).val()).show();
  }).val("2");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="tabbable full-width-tabs">
    <ul class="nav nav-tabs">
        <li class="w-100">
        <a href="#tab1default" data-toggle="tab">
        Subscribers</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade in active" id="tab1default">
            <div class="col-md-6">
                <span class="service__details">Details</span>
                <select id="select" name="cd-dropdown" class="cd-select">
                    <option value="1">50 YouTube Subscribers</option>
                    <option value="2">100 YouTube Subscribers</option>
                    <option value="3">300 YouTube Subscribers</option>
                    <option value="4" selected>500 YouTube Subscribers</option>
                    <option value="5">1000 YouTube Subscribers</option>
                    <option value="6">2000 YouTube Subscribers</option>
                    <option value="7">5000 YouTube Subscribers</option>
                </select>
            </div>
            <div class="col-md-3">
            <span class="service__details">Price $</span>
                <div class="pr-price d1">$15</div>
                <div class="pr-price d2">$20</div>
                <div class="pr-price d3">$30</div>
                <div class="pr-price d4">$45</div>
                <div class="pr-price d5">$80</div>
                <div class="pr-price d6">$150</div>
                <div class="pr-price d7">$300</div>
                <div class="pr-price d8">$550</div>
            </div>
            <div class="col-md-3">
                <a href="123" class="pr-btn b1">Add to cart</a>
                <a href="456" class="pr-btn b2">Add to cart</a>
                <a href="789" class="pr-btn b3">Add to cart</a>
                <a href="111" class="pr-btn b4">Add to cart</a>
                <a href="123" class="pr-btn b5">Add to cart</a>
                <a href="123" class="pr-btn b6">Add to cart</a>
                <a href="123" class="pr-btn b7">Add to cart</a>
                <a href="123" class="pr-btn b8">Add to cart</a>
            </div>
        </div> 
    </div> 
</div> <!-- /tabbable -->

Answer 1

You can use css (style="display:none") to hide all the elements at the start before the JS even loads. Then your callbacks on select change will show appropriate elements. Have a look at the example below.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
    jQuery(
        function () {
            jQuery('#select').on("change",function () {
                jQuery('.pr-price').hide();
                jQuery('.d'+jQuery(this).val()).show();
            });
            jQuery('#select').on("change",function () {
                jQuery('.pr-btn').hide();
                jQuery('.b'+jQuery(this).val()).show();
            });
        }
    );
</script>

<div class="tabbable full-width-tabs">
    <ul class="nav nav-tabs">
        <li class="w-100">
            <a href="#tab1default" data-toggle="tab">
                Subscribers</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade in active" id="tab1default">
            <div class="col-md-6">
                <span class="service__details">Details</span>
                <select id="select" name="cd-dropdown" class="cd-select">
                    <option value="1">50 YouTube Subscribers</option>
                    <option value="2">100 YouTube Subscribers</option>
                    <option value="3">300 YouTube Subscribers</option>
                    <option value="4">500 YouTube Subscribers</option>
                    <option value="5">1000 YouTube Subscribers</option>
                    <option value="6">2000 YouTube Subscribers</option>
                    <option value="7">5000 YouTube Subscribers</option>
                </select>
            </div>
            <div class="col-md-3">
                <span class="service__details">Price $</span>
                <div style="display:none" class="pr-price d1">$15</div>
                <div style="display:none" class="pr-price d2">$20</div>
                <div style="display:none" class="pr-price d3">$30</div>
                <div style="display:none" class="pr-price d4">$45</div>
                <div style="display:none" class="pr-price d5">$80</div>
                <div style="display:none" class="pr-price d6">$150</div>
                <div style="display:none" class="pr-price d7">$300</div>
                <div style="display:none" class="pr-price d8">$550</div>
            </div>
            <div class="col-md-3">
                <a style="display:none" href="123" class="pr-btn b1">Add to cart</a>
                <a style="display:none" href="456" class="pr-btn b2">Add to cart</a>
                <a style="display:none" href="789" class="pr-btn b3">Add to cart</a>
                <a style="display:none" href="111" class="pr-btn b4">Add to cart</a>
                <a style="display:none" href="123" class="pr-btn b5">Add to cart</a>
                <a style="display:none" href="123" class="pr-btn b6">Add to cart</a>
                <a style="display:none" href="123" class="pr-btn b7">Add to cart</a>
                <a style="display:none" href="123" class="pr-btn b8">Add to cart</a>
            </div>
        </div>
    </div>
</div> <!-- /tabbable -->