How to operate on a list item carried over from one div to another empty div
<p>I just started learning JavaScript.<br>
I have a problem. I'm trying to do the following:</p>

<p>I have two div's. Left populated with list, </p>

<p>.php code</p>

<pre><code>&lt;ul class="master"&gt;
    &lt;?php foreach ($zabiegi as $zabieg): 
        echo '&lt;button class="down" style="display: none;"&gt;Down&lt;/button&gt;'.'&lt;li&gt;'.$zabieg['nazwa'].'&lt;/li&gt;'.'&lt;button class="up" style="display: none;"&gt;Up&lt;/button&gt;';
    endforeach; ?&gt;
&lt;/ul&gt;
</code></pre>

<p>html</p>

<pre><code>&lt;ul class="master"&gt;
    &lt;li&gt;&lt;button class="down" style="display: none;"&gt;Down&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;First&lt;/li&gt;
    &lt;li&gt;&lt;button class="up" style="display: none;"&gt;Up&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button class="down" style="display: none;"&gt;Down&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;Second&lt;/li&gt;
    &lt;li&gt;&lt;button class="up" style="display: none;"&gt;Up&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button class="down" style="display: none;"&gt;Down&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;Third&lt;/li&gt;
    &lt;li&gt;&lt;button class="up" style="display: none;"&gt;Up&lt;/button&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>and right empty. I'm trying to achieve the following effect. When you click in the left <code>div</code> element, you copy the item to the right <code>div</code>. 
Then, when clicked on an item copied to the right <code>div</code> I want to show up 2 buttons (elements, whatever) called <code>UP</code>, <code>DOWN</code> (I should look like <code>[Down] [Li] [Up]</code> ). When you click on one of them (up, down), adequate element to which they are assigned will be shifted by one 
position up or down.</p>

<p>I do not want to use draggable (jquery-ui), I would like to perform this task on the basis of simple clicks</p>

<p>Any help is greatly appreciated.</p>
