Q:

How can display the image of the current element that you click?

I have this sample:
link
For example, when I click on div element 1 in the ".dreapta" to put the image and click on the item paragraful.Daca is two to hide one element and so ...
CODE HTML:
<ul>

    <li id="#bar">
        <img src="http://theimageconference.org/wp-content/uploads/2014/01/images-50x50.png"width=50 height=50></img>
        <p>ELEMENT 1</p>
    </li>
    <li id="#bar">
        <img src="http://whyfiles.org/wp-content/uploads/2013/04/promega_logo.png" width=50 height=50></img>
        <p>ELEMENT 2</p>
    </li>
    <li id="#bar">
        <img src="http://bikechicago.com/wp-content/uploads/bikechicago-uber-image-C2.png" width=50 height=50></img>
        <p>ELEMENT 3</p>
    </li>
    <li id="#bar">
        <img src="http://coordinate.com.au/wp-content/uploads/2014/06/CBR_Web_Images.jpg" width=50 height=50></img>
        <p>ELEMENT 4</p>
    </li>
    <li id="#bar">
        <img src="http://www.bpifrance-lelab.fr/var/bpi/storage/images/media/images/image-couverture/34625-1-fre-FR/image-couverture_large.jpg" width=50 height=50></img>
        <p>ELEMENT 5</p>
    </li>
    <li id="#bar">
        <img src="http://odpiralnicasi.com/photos/012/539/image-big.jpg" width=50 height=50></img>
        <p>ELEMENT 6</p>
    </li>

</ul>

<div class="dreapta">

</div>

CODE CSS:
ul{
    list-style-type:none;
    width:95px;
    float:left;
}

ul li{border-bottom:1px solid;}

p{padding;0;margin:0;}

.dreapta{float:right;width:100px;height:100px;border:1px solid;}

CODE JS:
$("ul li").click(function (event) {
    var barIndex = $("ul li").index($(this)) + 1;
    alert("Element poistion:" + barIndex);
});

I put an image to understand better:

Can you help me with an idea to solve this problem?
Thanks in advance!

A:

You can use clone() method to achieve it. Here is how:
$("ul li").click(function (event) {
    var barIndex = $("ul li").index($(this));
    alert("Element poistion:" + barIndex);
    $(".dreapta").html('');
    $("ul li").eq(barIndex).find('img').clone().css({
        'width': '100px',
        'height': '100px' 
    }).appendTo('.dreapta');
});

Here is updated fiddle: 
https://jsfiddle.net/rtcydtyh/12/

