Trouble placing multiple instances of flexslider on a website or page

HTML

<!-- SLIDER -->
<div id="blazeImageSlider">
    <section id="ForBlazeSlider" class="blaze-image-slider">
        <!-- Place somewhere in the <body> of your page -->
        <div class="flexslider carousel blaze-slider">
            <ul class="slides">
                <li>
                    <img src="/wp-content/themes/fgtm/img/ministries/blaze/jrChoir/jrChoir-childSinging" />
                </li>
                <li>
                    <img src="/wp-content/themes/fgtm/img/ministries/blaze/jrChoir/jrChoir-choir.jpg" />
                </li>
                <li>
                    <img src="/wp-content/themes/fgtm/img/ministries/blaze/jrChoir/jrChoir-choirPractice.JPG" />
                </li>
                <li>
                    <img src="/wp-content/themes/fgtm/img/ministries/blaze/jrChoir/jrChoir-choir.jpg" />
                </li>
                <!-- items mirrored twice, total of 12 -->
            </ul>
        </div>
    </section>
</div>
<!-- /SLIDER -->

<!-- SLIDER -->
    <div id="blazeTestimonialSlider">
        <section class="blaze-testimonial-slider">
            <!-- Place somewhere in the <body> of your page -->
            <div class="flexslider testimonial">
                <p class="testimonial-title">What people are saying</p>
                <ul class="slides">
                    <li class="testimonial-container-slide-one">
                        <h3>Nullam quis risus eget urna mollis ornare vel eu leo. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</h3>
                        <p>Graham H. — New York</p>
                    </li>
                    <li class="testimonial-container-slide-two">
                        <h3>Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum.</h3>
                        <p>Marshall G. — Brampton ON</p>
                    </li>
                    <li class="testimonial-container-slide-three">
                        <h3>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus.</h3>
                        <p>Michelle S. — Chicago</p>
                    </li>
                    <!-- items mirrored twice, total of 12 -->
                </ul>
            </div>
        </section>
    </div>
    <!-- /SLIDER -->

$(window).load(function() {
          $(".flexslider").flexslider({
            animation: "slide"
          });

          $(".blaze-slider.flexslider").flexslider({
              animation: "slide",
              itemWidth: 500,
              pausePlay: "true",
              start: function(slider){
                  $("#ForBlazeSlider").removeAttr("id");
              }
            });
        });

woocommerce / FlexSlider

Trouble placing multiple instances of flexslider on a website or page #1797