Bootstrap Carousel Arrows not changing slides

Question

I have multiple carousels on one page of my website and this one I cannot get to work. The right and left buttons do not change the slides and I can't figure out why.

Here is a link to a codepen https://codepen.io/aahmed2/pen/PjzwaQ

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div id="news-carousel" class="carousel slide" data-ride="carousel">
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <div class="carousel-caption">
        <h2 class="white shadow">In The News:</h2>
                <h3 class="white shadow">The Global Gap In Health Care Dollars For Young And Old Is Huge</h3>
                <a class="button-rev button-left" href="http://www.npr.org/sections/goatsandsoda/2017/05/09/527453473/old-people-get-very-little-health-care-in-the-developing-world" target="_blank">Learn More</a>
      </div>
    </div>
    <div class="item">
      <div class="carousel-caption">
        <h2 class="white shadow">In The News:</h2>
                <h3 class="white shadow">Can Saving Animals Prevent the Next Deadly Pandemic?</h3>
                <a class="button-rev button-left" href="http://www.smithsonianmag.com/science-nature/can-saving-animals-to-prevent-next-deadly-pandemic-180963151/" target="_blank">Learn More</a>
      </div>
    </div>
    <div class="item">
      <div class="carousel-caption">
        <h2 class="white shadow">In The News:</h2>
                <h3 class="white shadow">Coyotes No Match for Wolves’ Hunting Prowess</h3>
                <a class="button-rev button-left" href="http://news.unl.edu/newsrooms/today/article/big-game-jitters-coyotes-no-match-for-wolves-hunting-prowess/" target="_blank">Learn More</a> 
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#news-carousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#news-carousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">

Answer 1

When you add the closing script tag on the last script it works.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

See fiddle