Javascript: Page with two dialogs not working correctly

I'm currently developing a website-gallery of paintings. I have one section where I show two different authors for comparison, where you can individually pass between paintings in two screens. See it for yourself at http://ift.tt/2du32Nt (put 2 numbers between 1 and 1000 and click on comparar)

My problem is: there are 2 buttons that show individual info for each painting, in the form of a jquery dialog. The left dialog works; the right one appears at the bottom of the screen, even though the code is the same. I don't understand my problem, can anybody help me? comparador.php

<div class="col_half">
<!-- 1st button and image block-->
    <div id="imageDiv" style="margin-top: 5%; margin-bottom: 1%;">
        <br>
        <br>
        <img src="" class="pop" id="imagen" alt="" style="width: 650px; height: 520px;">
        <button type='button' id="prev" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-arrow-left"></span></button>
        <button type='button' id="next" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-arrow-right"></span></button>
        <button type='button' id="info" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-info-sign"></span></button>
        </div>
    </div>
    <div class="col_half col_last">
    <!-- 2nd button and image block-->
        <div id="imageDiv_cuadro2" style="margin-top: 5%; margin-bottom: 1%;">
        <br>
        <br>
        <img src="" class="pop2" id="imagen_2" alt="" style="width: 650px; height: 520px;">
        <button type='button' id="prev_2" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-arrow-left"></span></button>
        <button type='button' id="next_2" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-arrow-right"></span></button>
        <button type='button' id="info_2" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-info-sign"></span></button>
        </div>
    </div>

    <div id="dialog" class="box follow-scroll dialog" title="Información de la imagen">
        <table class="table">
            <tr id="nombre">
                <td>Nombre del autor</td>
                <td><label id="aut"></label></td>
            </tr>
            <tr id="titulo">
                <td>Titulo de la obra</td>
                <td id="t"></td>
            </tr>
            <tr id="anno">
                <td>Año</td>
                <td id="a"></td>
            </tr>
            <tr id="sop">
                <td>Soporte</td>
                <td id="s"></td>
            </tr>
            <tr id="museo">
                <td>Museo</td>
                <td id="m"></td>
            </tr>
        </table>
    </div>
    <div id="dialog2" class="box follow-scroll dialog" title="Información de la imagen">
        <table class="table">
            <tr id="nombre2">
                <td>Nombre del autor</td>
                <td><label id="aut2"></label></td>
            </tr>
            <tr id="titulo2">
                <td>Titulo de la obra</td>
                <td id="t2"></td>
            </tr>
            <tr id="anno2">
                <td>Año</td>
                <td id="a2"></td>
            </tr>
            <tr id="sop2">
                <td>Soporte</td>
                <td id="s2"></td>
            </tr>
            <tr id="museo2">
                <td>Museo</td>
                <td id="m2"></td>
            </tr>
        </table>
    </div>

imagen.js

$(function(){
    $( "#dialog" ).dialog({
        autoOpen: false,
        show: {
            effect: "blind",
            duration: 1000
        },
        hide: {
            effect: "blind",
            duration: 1000
        },
            resizable: false,
            position: { my: "left", at: "left+15", of: window }
    });
    $( "#info" ).on( "click", function() {
        $( "#dialog" ).dialog( "open" );
    });
    $( "#dialog2" ).dialog({
        autoOpen: false,
        show: {
            effect: "blind",
            duration: 1000
        },
        hide: {
            effect: "blind",
            duration: 1000
        },
            resizable: false,
            position: { my: "right", at: "right+15", of: window }
    });
    $( "#info_2" ).on( "click", function() {
        $( "#dialog2" ).dialog( "open" );
    });
});