Как объединить этот код в один? (HTML+JS)

Имеется три JS файла которые на 95% одинаковы и три html файла в котором все это вызывается. Хочу все сделать покомпактнее и управиться в один html и один JS файл. Но вот беда, в html все худо бедно засунул, а вот с JS что делать не знаю. Ну и естественно, сейчас в данном html правильно ничего не работает(кто из JS первый загрузился тот и работает)

index.html

...
<!--tabs section-->
<section class="colored-section bg-inverse" id="movies">
    <div class="container">
        <div class="title">
            <h3>Фильмы</h3>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card" style="background-color:#292b2c; border:0;">
                    <ul class="nav nav-tabs justify-content-center" role="tablist">
                        <li class="nav-item">
                            <a class="btn btn-secondary" data-toggle="tab" href="#upcoming" role="tab" style="margin-right: 10px;"><i class="fa fa-plus"></i> Новые</a>
                        </li>
                        <li class="nav-item">
                            <a class="btn btn-secondary active" data-toggle="tab" href="#now-playing" role="tab" style="margin-right: 10px;"><i class="fa fa-fire"></i> Популярное</a>
                        </li>
                        <li class="nav-item">
                            <a class="btn btn-secondary" data-toggle="tab" href="#top-rated" role="tab"><i class="fa fa-trophy"></i> Топ-100</a>
                        </li>
                    </ul>
                    <div class="card-block">
                        <div class="tab-content">
                            <!-- Now-playing -->
                            <div class="tab-pane active" id="now-playing" role="tabpanel">
                                <div class="container">
                                    <div class="col-md-0 offset-md-5">
                                        <nav>
                                            <ul class="pagination">
                                                <li class="page-item"><a class="page-link" id="first"><em class="fa fa-angle-double-left"></em></a></li>
                                                <li class="page-item"><a class="page-link" id="prev" aria-label="Previous"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
                                                <li class="page-item"><a class="page-link" id="pageCounter">1</a></li>
                                                <li class="page-item"><a class="page-link" id="next" aria-label="Next"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
                                                <li class="page-item"><a class="page-link" id="last"><em class="fa fa-angle-double-right"></em></a></li>
                                            </ul>
                                        </nav>
                                    </div>
                                    <div id="posters"></div>
                                    <!-- Modal -->
                                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="container">
                                                    <div class="modal-header">
                                                        <button class="btn btn-primary btn-round" value="Смотреть" href="javascript:void(0)" data-ahoy="video_player" style="position: unset;">Round</button>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="ion-ios-close-empty" aria-hidden="true"></span></button>
                                                    </div>
                                                    <div class="modal-body"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Top-rated -->
                            <div class="tab-pane" id="top-rated" role="tabpanel">
                                <div class="container">
                                    <div class="col-md-0 offset-md-5">
                                        <nav>
                                            <ul class="pagination">
                                                <li class="page-item"><a class="page-link" id="first"><em class="fa fa-angle-double-left"></em></a></li>
                                                <li class="page-item"><a class="page-link" id="prev" aria-label="Previous"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
                                                <li class="page-item"><a class="page-link" id="pageCounter">1</a></li>
                                                <li class="page-item"><a class="page-link" id="next" aria-label="Next"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
                                                <li class="page-item"><a class="page-link" id="last"><em class="fa fa-angle-double-right"></em></a></li>
                                            </ul>
                                        </nav>
                                    </div>
                                    <div id="posters"></div>
                                    <!-- Modal -->
                                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="container">
                                                    <div class="modal-header">
                                                        <button class="btn btn-primary btn-round" value="Смотреть" href="javascript:void(0)" data-ahoy="video_player" style="position: unset;">Round</button>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="ion-ios-close-empty" aria-hidden="true"></span></button>
                                                    </div>
                                                    <div class="modal-body"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Upcoming -->
                            <div class="tab-pane" id="upcoming" role="tabpanel">
                                <div class="container">
                                    <div class="col-md-0 offset-md-5">
                                        <nav>
                                            <ul class="pagination">
                                                <li class="page-item"><a class="page-link" id="first"><em class="fa fa-angle-double-left"></em></a></li>
                                                <li class="page-item"><a class="page-link" id="prev" aria-label="Previous"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
                                                <li class="page-item"><a class="page-link" id="pageCounter">1</a></li>
                                                <li class="page-item"><a class="page-link" id="next" aria-label="Next"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
                                                <li class="page-item"><a class="page-link" id="last"><em class="fa fa-angle-double-right"></em></a></li>
                                            </ul>
                                        </nav>
                                    </div>
                                    <div id="posters"></div>
                                    <!-- Modal -->
                                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="container">
                                                    <div class="modal-header">
                                                        <button class="btn btn-primary btn-round" value="Смотреть" href="javascript:void(0)" data-ahoy="video_player" style="position: unset;">Round</button>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="ion-ios-close-empty" aria-hidden="true"></span></button>
                                                    </div>
                                                    <div class="modal-body"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
...
<script src="/js/1.js"></script>
<script src="/js/2.js"></script>
<script src="/js/3.js"></script>

1.js

$(function() {
    var page_number = 1
    getRequest(page_number);
    $("#next").on("click", function() {
        page_number += 1
        getRequest(page_number);
        $("#pageCounter").text(page_number);
    });
    $("#prev").on("click", function() {
        if (page_number == 1) {
            return;
        } else {
            page_number -= 1;
            getRequest(page_number);
            $("#pageCounter").text(page_number);
        }
    });
    $("#first").on("click", function() {
        page_number = 1
        getRequest(page_number);
        $("#pageCounter").text(page_number);
    });
    $("#last").on("click", function() {
        page_number = 48
        getRequest(page_number);
        $("#pageCounter").text(page_number);
    });
    function getRequest(page_number) {
        var params = {
            api_key: 'NoNe',
            page: page_number,
            language: "ru-RU"
        };
        var url = 'http://api.themoviedb.org/3/movie/now_playing';
        $.getJSON(url, params).done(function(data) {
            showResults(data.results);
        });
    }
    function showResults(results) {
        var html = '';
        $.each(results, function(index, value) {
            console.log(value.title);
            var poster_path = value.poster_path;
            var poster_title = value.title;
            var id = value.id;
            if (poster_path === null) {
                return;
            } else {
                html += '<div class="poster" data-id="' + id + '"><img class="img" src="http://image.tmdb.org/t/p/w200' + poster_path + '"  title="' + poster_title + '"/></div>';
                $('#posters').html(html);
            }
        });
        $(".poster").on("click", function() {
            console.log($(this).data('id'));
            var movie_id = $(this).data('id')
            console.log(movie_id)
            movieDetails(movie_id);
        });
    }
    function movieDetails(id) {
        var params = {
            api_key: 'NoNe',
            external_source: "imdb_id",
            language: "ru-RU"
        };
        var url = 'http://api.themoviedb.org/3/movie/' + id;
        $.getJSON(url, params).done(function(data) {
            showModal(data.backdrop_path, data.poster_path, data.title, data.original_title, data.vote_average, data.release_date, data.genres, data.overview, data.production_countries);
        });
    }
    function showModal(backdrop_path, poster_path, title, original_title, vote_average, release_date, genres, overview, production_countries) {
        $('#myModal').modal('show');
        var genre = genres.map(function(item) {
            return " " + item['name'];
        });
        var production_countrie = production_countries.map(function(item) {
            return " " + item['name'];
        });
        var html = '<div><img src="http://image.tmdb.org/t/p/w300/' + poster_path + '" /></div><div class="Modal-text"><div class="top-line"><h1>' + title + " / " + original_title + '</h1><span> Страна: ' + production_countrie + '</span><br><span> Рейтинг: ' + vote_average + '</span><br><span> Дата релиза: ' + release_date + '</span><br><span> Жанры: ' + genre + '</span></div><br><p>' + overview + '</p><br><div id="video_player" data-title="' + title + " / " + original_title + '"></div><br></div>';
        $('.modal-body').html(html);
        var css = 'linear-gradient(rgba(0, 0, 0, 0.85),rgba(0, 0, 0, 0.85)), url(http://image.tmdb.org/t/p/original/' + backdrop_path + ')';
        $('.modal-content').css('background-image', css);
    }
});

2.js

$(function(){
    var page_number = 1
    getRequest(page_number);
    $("#next").on("click", function () {
        page_number +=1
        getRequest(page_number);
        $("#pageCounter").text(page_number);
    });
    $("#prev").on("click", function () {
        if (page_number==1){
            return;
        }else {
            page_number -=1;
            getRequest(page_number);
            $("#pageCounter").text(page_number);
        }
    });
    $("#first").on("click", function () {
        page_number = 1
        getRequest(page_number);
        $("#pageCounter").text(page_number);
    });
    $("#last").on("click", function () {
        page_number = 100
        getRequest(page_number);
        $("#pageCounter").text(page_number);
    });
    function getRequest(page_number) {
        var params = {
            api_key: 'NONE',
            page: page_number,
            language: "ru-RU"
        };
        var url = 'http://api.themoviedb.org/3/movie/top_rated';
        $.getJSON(url, params).done(function(data) {
            showResults(data.results);
        });
    }
    function showResults(results) {
        var html = '';
        $.each(results, function(index,value) {
            console.log(value.title);
            var poster_path = value.poster_path;
            var poster_title = value.title;
            var id = value.id;
            if (poster_path === null) {
                return;
            } else {
                html += '<div class="poster" data-id="' + id + '"><img class="img" src="http://image.tmdb.org/t/p/w200' + poster_path  + '"  title="' + poster_title + '"/></div>';
                $('#posters').html(html);
            }
        });
        $(".poster").on("click", function () {
            console.log($(this).data('id'));
            var movie_id = $(this).data('id')
            console.log(movie_id)
            movieDetails(movie_id);
        });
    }
    function movieDetails(id) {
        var params = {
            api_key: 'NONE',
            external_source: "imdb_id",
            language: "ru-RU"
        };
        var url = 'http://api.themoviedb.org/3/movie/' + id;
        $.getJSON(url, params).done(function(data) {
            showModal(data.backdrop_path, data.poster_path, data.title, data.original_title, data.vote_average, data.release_date, data.genres, data.overview, data.production_countries);
        });
    }
    function showModal(backdrop_path, poster_path, title, original_title, vote_average, release_date, genres, overview, production_countries) {
        $('#myModal').modal('show'); 
        var genre = genres.map(function(item) {
            return " " + item['name'];
        });
        var production_countrie = production_countries.map(function(item) {
            return " " + item['name'];
        });
        var html = '<div><img src="http://image.tmdb.org/t/p/w300/' + poster_path + '" /></div><div class="Modal-text"><div class="top-line"><h1>' + title + " / " + original_title + '</h1><span> Страна: ' + production_countrie + '</span><br><span> Рейтинг: ' + vote_average + '</span><br><span> Дата релиза: ' + release_date + '</span><br><span> Жанры: ' + genre + '</span></div><br><p>' + overview + '</p><br><div id="video_player" data-title="' + title + " / " + original_title + '"></div><br></div>';
        $('.modal-body').html(html);
        var css  = 'linear-gradient(rgba(0, 0, 0, 0.85),rgba(0, 0, 0, 0.85)), url(http://image.tmdb.org/t/p/original/' + backdrop_path + ')';
        $('.modal-content').css('background-image',css);    
    }
});

3.js

$(function(){
    var page_number = 1
    getRequest(page_number);
    $("#next").on("click", function () {
        page_number +=1
        getRequest(page_number);
        $("#pageCounter").text(page_number);
    });
    $("#prev").on("click", function () {
        if (page_number==1){
            return;
        }else {
            page_number -=1;
            getRequest(page_number);
            $("#pageCounter").text(page_number);
        }
    });
    $("#first").on("click", function () {
        page_number = 1
        getRequest(page_number);
        $("#pageCounter").text(page_number);
    });
    $("#last").on("click", function () {
        page_number = 10
        getRequest(page_number);
        $("#pageCounter").text(page_number);
    });
    function getRequest(page_number) {
        var params = {
            api_key: 'NoNE',
            page: page_number,
            language: "ru-RU"
        };
        var url = 'http://api.themoviedb.org/3/movie/upcoming';
        $.getJSON(url, params).done(function(data) {
            showResults(data.results);
        });
    }
    function showResults(results) {
        var html = '';
        $.each(results, function(index,value) {
            console.log(value.title);
            var poster_path = value.poster_path;
            var poster_title = value.title;
            var id = value.id;
            var release_date = value.release_date
            var today = new Date();
            var dd = today.getDate();
            var mm = today.getMonth()+1; //January is 0!
            var yyyy = today.getFullYear();
            if(dd<10) { dd = '0'+dd } 
            if(mm<10) { mm = '0'+mm } 
            data_server = yyyy + '-' + mm + '-' + dd;
            if (poster_path === null) {
                return;
            } else if (data_server < release_date) {
                html += '<div class="poster" data-id="' + id + '"><img class="img" src="http://image.tmdb.org/t/p/w200' + poster_path  + '"  title="' + poster_title + '"/></div>';
                $('#posters').html(html);
            } else { return; }
        });
        $(".poster").on("click", function () {
            console.log($(this).data('id'));
            var movie_id = $(this).data('id')
            console.log(movie_id)
            movieDetails(movie_id);
        });
    }
    function movieDetails(id) {
        var params = {
            api_key: 'NoNE',
            external_source: "imdb_id",
            language: "ru-RU"
        };
        var url = 'http://api.themoviedb.org/3/movie/' + id;
        $.getJSON(url, params).done(function(data) {
            showModal(data.backdrop_path, data.poster_path, data.title, data.original_title, data.vote_average, data.release_date, data.genres, data.overview, data.production_countries);
        });
    }
    function showModal(backdrop_path, poster_path, title, original_title, vote_average, release_date, genres, overview, production_countries) {
        $('#myModal').modal('show'); 
        var genre = genres.map(function(item) {
            return " " + item['name'];
        });
        var production_countrie = production_countries.map(function(item) {
            return " " + item['name'];
        });
        var html = '<div><img src="http://image.tmdb.org/t/p/w300/' + poster_path + '" /></div><div class="Modal-text"><div class="top-line"><h1>' + title + " / " + original_title + '</h1><span> Страна: ' + production_countrie + '</span><br><span> Рейтинг: ' + vote_average + '</span><br><span> Дата релиза: ' + release_date + '</span><br><span> Жанры: ' + genre + '</span></div><br><p>' + overview + '</p><br><div id="video_player" data-player="trailer" data-title="' + title + " / " + original_title + '"></div><br></div>';
        $('.modal-body').html(html);
        var css  = 'linear-gradient(rgba(0, 0, 0, 0.85),rgba(0, 0, 0, 0.85)), url(http://image.tmdb.org/t/p/original/' + backdrop_path + ')';
        $('.modal-content').css('background-image',css);    
    }
});

Да много div'ов, да все с ними порядке, да это bootstrap 4. Подскажите как сократить код в html и сделать один JS файл...