Edit in JSFiddle

var output1 = $("#output1"),
    output2 = $("#output2");

$("#lista1 li").on("click", function (event) {
    output1.append("<p>" + $(this).text() + "</p>");
});

$("#lista2").on("click", "li", function (event) {
    output2.append("<p>" + $(this).text() + "</p>");
});

<div class="columnaIzquierda">
    <p>Observando cada uno de los elementos de la lista por separado...</p>
    <ul id="lista1">
        <li>Opción 1 lista 1</li>
        <li>Opción 2 lista 1</li>
        <li>Opción 3 lista 1</li>
    </ul>
    <div id="output1"></div>
</div>
<div class="columnaDerecha">
    <p>Observando la lista en su conjunto...</p>
    <ul id="lista2">
        <li>Opción 1 lista 2</li>
        <li>Opción 2 lista 2</li>
        <li>Opción 3 lista 2</li>
    </ul>
    <div id="output2"></div>
</div>

*[class^='columna'] {
    width: 50%;
}
.columnaIzquierda {
    float: left;
}
.columnaDerecha {
    float: right;
}
ul li {
    cursor: pointer;
}
*[id^='output'] {
    margin: 1em;
    padding: 1em;
    border: 1px solid #000;
}