jquery - replace spans with input fields
<p>so I have number of SPANs elements, and each one have input field.
 when I click SAVE button I would that the input field data will replace the SPAN data (according to the right div box- 1 or 2).</p>

<pre><code>&lt;a href="#" id="save-edit-button" data-attr="box2"&gt;SAVE&lt;/a&gt;

&lt;div id="box1-edit-area" &gt;
    &lt;li&gt;&lt;span id="website" class="edit-text" style="display: inline; "&gt;www.site.com&lt;/span&gt;
        &lt;input type="text" value="www.site.com" class="edit-input" id="website_input" &gt;
    &lt;/li&gt;

    &lt;li&gt;&lt;span id="first" class="edit-text" style="display: inline; "&gt;first name&lt;/span&gt;
        &lt;input type="text" value="Roi" class="edit-input" id="first_input" &gt;
    &lt;/li&gt;
&lt;/div&gt;  

&lt;div id="box2-edit-area" &gt;
    &lt;li&gt;&lt;span id="phone" class="edit-text" style="display: inline; "&gt;97542668&lt;/span&gt;
        &lt;input type="text" value="97542668m" class="edit-input" id="phone_input" &gt;
    &lt;/li&gt;

    &lt;li&gt;&lt;span id="city" class="edit-text" style="display: inline; "&gt;Paris&lt;/span&gt;
        &lt;input type="text" value="Paris" class="edit-input" id="city_input" &gt;
    &lt;/li&gt;
&lt;/div&gt;
</code></pre>

<p>SCRIPT</p>

<pre><code>$(document).ready(function()
{
    $(document).on('click', "#save-edit-button", function ()
    {
        DATA INSIDE THE INPUT FIELD SHOULD REPLACE THE RELEVANT SPAN
    });
});
</code></pre>