Clone from one table to antoher

Question

I just saw in another post the solution, though when I try using it in my code it doesn't work.

I'm trying to add the item on one table to the other one through the button. Any help is appreciated.

html

<div id="container">

    <input type="text" name="search" id="search"  placeholder="Ingrese el nombre del examen..." size="50">
    </input>

    <table id="proctable" >
        <tr>
            <th>Examen</th>
            <th>Precio</th>
            <th></th>
        </tr>

        <tr>
            <td>hola</td>
            <td>10</td>
            <td><input class="addBtn" type="button" value="Agregar"></td>
        </tr>

    </table>

    <hr>

    <div>
       <table id="comptable">
          <tr class="header">
              <th>Examen</th>
              <th>Precio</th>
          </tr>
       </table>
    </div>

</div>

JS

<script type="text/javascript">
    var items = [];

        $(".addBtn").on("click", function() {
            var newTr = $(this).closest("tr").clone();
            items.push(newTr);
            newTr.appendTo( $("#comptable") );

        });
</script>

https://jsfiddle.net/45nfvg9j/

Answer 1

Your javascript actually works as intended. The jsFiddle was broken because of two little things:

1. You had script open and close tags around your javascript. jsFiddle was actually showing a yellow note "Input plain JavaScript code, no HTML."

2. Input tags need to be self-closing, like this: <input class="addBtn" type="button" value="Agregar"/> , not <input class="addBtn" type="button" value="Agregar"></input>