Jquery Duplicate complete table, changing attributes

Question

I got this html table

<table id="item-list" class="table table-hover table-striped">
    <thead>
        <tr>
            <th>Item</th>
            <th width="20%">Nombre</th>
            <th width="20%">Prix (TTC)</th>
            <th width="20%" class="actions">Total</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr class="order-item">
            <td><input name="name[1]" type="hidden" class="m-wrap small refrech-calc" value="cardv2">cardv2</td>
            <td><input name="number[1]" type="text" class="m-wrap small refrech-calc" value="15"></td>
            <td><input name="price[1]" type="text" class="m-wrap small refrech-calc" value="42"></td>
            <td><span class="order-amount">630.00</span> €</td>
            <td><button class="btn red mini deleteRowButton"><i class="icon-remove icon-white"></i></button></td>
        </tr>
        <tr class="order-item">
            <td><input name="name[2]" type="hidden" class="refrech-calc" value="cardv2-5">cardv2-5</td>
            <td><input name="number[2]" type="text" class="refrech-calc" value="20"></td>
            <td><input name="price[2]" type="text" class="refrech-calc" value="45"></td>
            <td><span class="order-amount">900.00</span> €</td>
        </tr>
        <tr class="order-item">
            <td><input name="name[3]" type="hidden" class="refrech-calc" value="asuspx800">Asus px800</td>
            <td><input name="number[3]" type="text" class="refrech-calc" value="1"></td>
            <td><input name="price[3]" type="text" class="refrech-calc" value="260"></td>
            <td><span class="order-amount">260.00</span> €</td>
            <td><button class="btn red mini deleteRowButton"><i class="icon-remove icon-white"></i></button></td>
        </tr>
    </tbody>
</table>

And I'd want to generate another table, without inputs, but with their values. Example:

<table id="item-list" class="table table-hover table-striped">
    ...
    <tbody>
        <tr class="order-item">
            <td>(name[1] values)</td>
            <td>(number[1])</td>
            <td>price[1]</td>
            <td><span class="order-amount">630.00</span> €</td>
        </tr>
        <tr class="order-item">
            <td>name[2]</td>
            <td>number[2]</td>
            <td>price[2]</td>
            <td><span class="order-amount">900.00</span> €</td>
        </tr>
        ....etc
    </tbody>
</table>

Indeed I want to summarize my inputs values in another "clean" table.

My problem is to get correct input arrays and display all of this.

Answer 1

try something like this,FIDDLE

        $(function(){
            var clone_table = $('#item-list').clone();
            $(clone_table).addClass('cloneKlass');

            $('body').append(clone_table);

            $('.cloneKlass input').each(function(){
                $(this).replaceWith(this.value);
            })
        })