Cacher is the code snippet organizer for pro developers

<?php 
    include('career-areas--data.php');
    include('career-areas--lightbox.php');
    $x = 1; 
    foreach($career_areas as $career_area) { ?>
    <div class="item item--<?php echo $x; ?>">
        <h2 class="career--title"> <?php echo $career_area['title']; ?> </h2>
        <p class="career--copy"> <?php echo $career_area['copy']; ?> </p>
        <p class="career--link" data-toggle="modal" data-target="#careerArea<?php echo $x; ?>"> 
            Learn More
    </p>
    </div>
<?php $x++; } ?>


<?php $x = 1; foreach($career_areas as $career_area) { ?>
    <!-- Modal -->
    <div class="modal fade" id="careerArea<?php echo $x; ?>" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal--image" style="background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0)),url(assets/build/img/lightbox/engineering.jpg) no-repeat center center / cover;">
                    <div class="modal--wrapper">
                        <div class="item item--1">
                            <h1 class="modal--title">Global Career Areas</h1>
                            <h2 class="modal--career-title"> <?php echo $career_area['title']; ?> </h2>
                            <p>
                                Join our 8,000 high-performing engineers and work on developing solutions that redefine ‘state-of-the-art’. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing.
                            </p>
                            <p>
                                <a href="javascript:void(0);" class="btn btn-default modal--link">View Opportunities</a>
                            </p>
                            <button type="button" class="btn btn-blue modal--close" data-dismiss="modal">
                                <span class="sr-only">Close</span>
                            </button>
                            <button type="button" class="btn btn-default btn-prev">Prev</button>
                            <button type="button" class="btn btn-default btn-next">Next</button>
                        </div>
                        <div class="item item--2">
                            <img class="img-responsive" src="assets/build/img/lightbox/engineering.jpg" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.Modal content-->

        </div>
    </div>
<?php $x++; } ?>

function modalAnim(x) {
    $('.modal .modal-dialog').attr('class', 'modal-dialog  ' + x + '  animated');
};
$('.modal').on('show.bs.modal', function (e) {
  var anim = 'fadeIn'; // define entrance animation
      modalAnim(anim);
});
$('.modal').on('hide.bs.modal', function (e) {
  var anim = 'fadeOut'; // define exit animation
      modalAnim(anim);
});

@import 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css';