Как я могу скопировать данные из выбранных строк в текстовые поля в другой таблице, используя jquery?

Question

У меня есть две таблицы.В первой таблице отображаются мои товары, а в другой - корзина покупок, поэтому, когда покупатели выбирают товар из table1, его данные (имя, цена и т. Д.) Копируются в текстовые поля во второй таблице.

Мой вопрос: Как скопировать данные только выбранные строки из table1 и добавить их в текстовые поля в table2 с помощью jQuery?

Вот таблица1:

<table id="table1" style="width:100%" border="0" cellpadding="0" cellspacing="0">
        <thead  >
        <tr >
            <th>Bar-code</th>
            <th>Product_Name</th>
            <th>Price</th>
        </tr>
        </thead>
            <tbody>
                <tr role="row" class="selected" style="border:1px solid black;">                  
                    <td >545333456</td>
                    <td>Galaxy S9</td>
                    <td>700</td>
                </tr>
                <tr role="row" class="odd"  style="border:1px solid black;">
                    <td>407654</td>
                    <td>SD 64G </td>
                    <td>700</td>
                </tr>
                <tr role="row" class="selected"  style="border:1px solid black;">
                    <td>876543</td>
                    <td>Galaxy S5</td>
                    <td>700</td>
            </tbody>
</table>
<button href="#" class="btn btn-success" data-panelId2="model23" id="copy1">
        Add
    </button>

Вот таблица2:

<table id="tb2" cellpadding="0" cellspacing="0" border="1">
    <thead>
        <tr>
            <th>Bar-code</th>
            <th>Product_Name</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="text" id="Barcode" /></td>
            <td><input type="text" id="txtName" /></td>
            <td><input type="text" id="Price" /></td>
        </tr>
    </tbody>
</table>

Answer 1

$('#copy1').click(function() {
  let tbody = $('#tb2 tbody')
  
  $('.selected').each(function(index) {
    let cells = $(this).children();
    let tr = $('<tr>');
    tr.append($('<td>').append($('<input>').val($(cells[0]).text()).attr('id', 'Barcode' + index)));
    tr.append($('<td>').append($('<input>').val($(cells[1]).text()).attr('id', 'txtName' + index)));
    tr.append($('<td>').append($('<input>').val($(cells[2]).text()).attr('id', 'Price' + index)));
    tbody.append(tr)
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table1" style="width:100%" border="0" cellpadding="0" cellspacing="0">
        <thead  >
        <tr >
            <th>Bar-code</th>
            <th>Product_Name</th>
            <th>Price</th>
        </tr>
        </thead>
            <tbody>
                <tr role="row" class="selected" style="border:1px solid black;">                  
                    <td >545333456</td>
                    <td>Galaxy S9</td>
                    <td>700</td>
                </tr>
                <tr role="row" class="odd"  style="border:1px solid black;">
                    <td>407654</td>
                    <td>SD 64G </td>
                    <td>700</td>
                </tr>
                <tr role="row" class="selected"  style="border:1px solid black;">
                    <td>876543</td>
                    <td>Galaxy S5</td>
                    <td>700</td>
            </tbody>
</table>
<button href="#" class="btn btn-success" data-panelId2="model23" id="copy1">
        Add
    </button>
    
    <table id="tb2" cellpadding="0" cellspacing="0" border="1">
    <thead>
        <tr>
            <th>Bar-code</th>
            <th>Product_Name</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Answer 2

Есть две выбранные строки, я не уверен, что вы ожидаете со значениями во второй строке, так как в другой таблице есть только один набор входных данных.

$('#copy1').click(function() {
  let cells = $('.selected').children();
  $('#Barcode').val($(cells[0]).text());
  $('#txtName').val($(cells[1]).text());
  $('#Price').val($(cells[2]).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table1" style="width:100%" border="0" cellpadding="0" cellspacing="0">
        <thead  >
        <tr >
            <th>Bar-code</th>
            <th>Product_Name</th>
            <th>Price</th>
        </tr>
        </thead>
            <tbody>
                <tr role="row" class="selected" style="border:1px solid black;">                  
                    <td >545333456</td>
                    <td>Galaxy S9</td>
                    <td>700</td>
                </tr>
                <tr role="row" class="odd"  style="border:1px solid black;">
                    <td>407654</td>
                    <td>SD 64G </td>
                    <td>700</td>
                </tr>
                <tr role="row" class="selected"  style="border:1px solid black;">
                    <td>876543</td>
                    <td>Galaxy S5</td>
                    <td>700</td>
            </tbody>
</table>
<button href="#" class="btn btn-success" data-panelId2="model23" id="copy1">
        Add
    </button>
    
    <table id="tb2" cellpadding="0" cellspacing="0" border="1">
    <thead>
        <tr>
            <th>Bar-code</th>
            <th>Product_Name</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="text" id="Barcode" /></td>
            <td><input type="text" id="txtName" /></td>
            <td><input type="text" id="Price" /></td>
        </tr>
    </tbody>
</table>