javascript - get index value of dynamically generated child divs on mouse down and up

Question

i am working on a page which generate the dynamic DOM structure and the divs in that DOM contains the text. I want to create a jQuery or JavaScript function so that when user selects some text from page then the index of div containing the text should be stored in variables on mouse down and mouse up events. I have created the following fiddle, its the prototype of what i want but i want to be my function more generic i.e. in any pageContainer when user selects the text it should give me inital div index and final div index. One more thing that in DOM structure only div with id viewer is not dynamic anything else is dynamic

Here is fiddle link

and my page's DOM structure :

<div id="viewer">
    <div id="pageContainer1" >
        <canvas id="page1" ></canvas>
        <div class="textLayer">
            <div>......some text here....</div>
            <div>......some text here....</div>
            <div>......some text here....</div>
        </div>
    </div>

    <div id="pageContainer2" >
        <canvas id="page2" ></canvas>
        <div class="textLayer">
            <div>......some text here....</div>
            <div>......some text here....</div>
            <div>......some text here....</div>
        </div>
    </div>

    <div id="pageContainer3" >
        <canvas id="page3" ></canvas>
        <div class="textLayer">
            <div>......some text here....</div>
            <div>......some text here....</div>
            <div>......some text here....</div>
        </div>
    </div>
</div>