Jquery-datatable script doesnt work after implemtation of Mapael Map

Question

I’m trying to implement the following template for a world map : https://rawgit.com/neveldo/jQuery-Mapael/2.2.0/examples/basic/legend_plotted_cities_areas.html into a existing template with a jQuery datatables.

But I've only managed to load one of the two functions (map or table) on the same html page. How can I run both functions on the same html page?

</div><!-- br-mainpanel -->
<!-- ########## END: MAIN PANEL ########## -->

<script src="../lib/jquery/jquery.js"></script>
<script src="../lib/popper.js/popper.js"></script>
<script src="../lib/bootstrap/bootstrap.js"></script>
<script src="../lib/perfect-scrollbar/js/perfect-scrollbar.jquery.js"></script>
<script src="../lib/moment/moment.js"></script>
<script src="../lib/jquery-ui/jquery-ui.js"></script>
<script src="../lib/jquery-switchbutton/jquery.switchButton.js"></script>
<script src="../lib/peity/jquery.peity.js"></script>
<script src="../lib/highlightjs/highlight.pack.js"></script>
<script src="../lib/datatables/jquery.dataTables.js"></script>
<script src="../lib/datatables-responsive/dataTables.responsive.js"></script>
<script src="../lib/select2/js/select2.min.js"></script>

<script src="../js/bracket.js"></script>
<script>
    $(function () {
        'use strict';

        $('#datatable1').DataTable({
            responsive: true,
            language: {
                searchPlaceholder: 'Search...',
                sSearch: '',
                lengthMenu: '_MENU_ items/page',
            }
        });

        $('#datatable2').DataTable({
            bLengthChange: false,
            searching: false,
            responsive: true
        });

        // Select2
        $('.dataTables_length select').select2({ minimumResultsForSearch: Infinity });

    });

</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"
        charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js" charset="utf-8"></script>
<script src="../../js/jquery.mapael.js" charset="utf-8"></script>
<script src="../../js/maps/france_departments.js" charset="utf-8"></script>
<script src="../../js/maps/world_countries.js" charset="utf-8"></script>
<script src="../../js/maps/usa_states.js" charset="utf-8"></script>

<script type="text/javascript">
    $(function () {
        $(".mapcontainer").mapael({
            map: {
                name: "world_countries",
                defaultArea: {
                    attrs: {
                        stroke: "#fff",
                        "stroke-width": 1
                    }
                }
            }, ....

Answer 1

It works now. I had to remove the following line:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" charset="utf-8"></script>