How to combine multiple selectable in jqueryUI

Question

<div id="selectable">
    <div>
        <p><span>content</span> <span>1</span></p>
        <p><span>content</span> <span>2</span></p>
        <p><span>content</span> <span>3</span></p>
        <p><span>content</span> <span>4</span></p>
    </div>
    <div>
        <p><span>content</span> <span>5</span></p>
        <p><span>content</span> <span>6</span></p>
        <p><span>content</span> <span>7</span></p>
        <p><span>content</span> <span>8</span></p>
    </div>
    <div>
        <p><span>content</span> <span>9</span></p>
        <p><span>content</span> <span>10</span></p>
        <p><span>content</span> <span>11</span></p>
        <p><span>content</span> <span>12</span></p>
    </div>
</div>

Note: HTML is not in control.

How do I apply jquery selectable to all <p> located inside different <div>. and all the <p> should work like as in same <div>. Example

<div id="selectable">
    <div>
        <p><span>content</span> <span>1</span></p>
        <p><span>content</span> <span>2</span></p>
        <p><span>content</span> <span>3</span></p>
        <p><span>content</span> <span>4</span></p>
        <p><span>content</span> <span>5</span></p>
        <p><span>content</span> <span>6</span></p>
        <p><span>content</span> <span>7</span></p>
        <p><span>content</span> <span>8</span></p>
        <p><span>content</span> <span>9</span></p>
        <p><span>content</span> <span>10</span></p>
        <p><span>content</span> <span>11</span></p>
        <p><span>content</span> <span>12</span></p>
    </div>
</div>  

JS:

$('#selectable > div').selectable();

jsfiddle

Answer 1

You need to use filter option.

Docs for filter option

$("#selectable").selectable({
  filter: "p"
});

Working Demo