Swap selected items to another table based on selections

Issue

I am trying to swap the selected/checked items from one table group to another table group by using jquery based on the selections. Designed two selection group of tables. When user checks the items and clicks on the button, the selected/checked item needs to move to another group. I tried with Jquery by using the foreach loop on the click of buttons. But the entire table is getting removed.

My code as follows:

function Swapselections(args) {

  if (args.textContent == '>>') {
    alert('>>');

    var template = $('#tblgroup1').html();
    $("#tblgroup1").remove();
    $("#tblgroup2").append(template);
  } else if (args.textContent == '>') {
    alert('>');
  } else if (args.textContent == '<') {
    alert('<');
  } else if (args.textContent == '<<') {
    alert('<<');


    var template = $('#tblgroup2').html();
    $("#tblgroup2").remove();
    $("#tblgroup1").append(template);

  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="form" class="row" style="">
  <div class="col-5">
    <fieldset style="border: 1px solid #cccc;">
      <legend>Group Name</legend>
      Field Name: <input id="txtsearch" placeholder="Filter" name="vehicle1" value="">
      <div style="height: 250px; overflow-y: scroll; overflow-x: hidden; ">
        <table id="tblgroup1">
          <tr>
            <td><input type="checkbox" id="vehicle1" name="vehicle2" value="Bike1"></td>
            <td><label for="vehicle1">Abc</label></td>
          </tr>

          <tr>
            <td><input type="checkbox" id="vehicle1" name="vehicle3" value="Bike2"></td>
            <td><label for="vehicle1">Def</label></td>
          </tr>
          <tr>
            <td><input type="checkbox" id="vehicle1" name="vehicle4" value="Bike3"></td>
            <td><label for="vehicle1">Ghi</label></td>
          </tr>
          <tr>
            <td><input type="checkbox" id="vehicle1" name="vehicle5" value="Bike4"></td>
            <td><label for="vehicle1">Jkl</label></td>
          </tr>
          <tr>
            <td><input type="checkbox" id="vehicle1" name="vehicle6" value="Bike5"></td>
            <td><label for="vehicle1">Mno</label></td>
          </tr>
          <tr>
            <td><input type="checkbox" id="vehicle1" name="vehicle7" value="Bike6"></td>
            <td><label for="vehicle1">Pqr</label></td>
          </tr>
          <tr>
            <td><input type="checkbox" id="vehicle1" name="vehicle8" value="Bike7"></td>
            <td><label for="vehicle1">Stu</label></td>
          </tr>
          <tr>
            <td><input type="checkbox" id="vehicle1" name="vehicle9" value="Bike8"></td>
            <td><label for="vehicle1">vwx</label></td>
          </tr>
          <tr>
            <td><input type="checkbox" id="vehicle1" name="vehicle10" value="Bike9"></td>
            <td><label for="vehicle1">Yz</label></td>
          </tr>
          <tr>
            <td><input type="checkbox" id="vehicle1" name="vehicle11" value="Bike10"></td>
            <td><label for="vehicle1">AAA</label></td>
          </tr>
          <tr>
            <td><input type="checkbox" id="vehicle1" name="vehicle12" value="Bike11"></td>
            <td><label for="vehicle1">BBB</label></td>
          </tr>
        </table>
      </div>
    </fieldset>
  </div>

  <div id="dvswapbtns" class="col-2 btn-group-vertical dvswapbtns">
    <button type="button" class="btn btn-primary" onclick="Swapselections(this)">>></button> <br />
    <button type="button" class="btn btn-primary" onclick="Swapselections(this)">></button> <br />
    <button type="button" class="btn btn-primary" onclick="Swapselections(this)"><</button><br />
    <button type="button" class="btn btn-primary" onclick="Swapselections(this)"><<</button><br />
  </div>
  <div class="col-5">
    <fieldset style="border: 1px solid #cccc;">
      <legend>Group Name</legend>
      Field Name: <input id="txtsearch2" placeholder="Filter" name="vehicle2" value="">
      <div style="height: 250px; overflow-y: scroll; overflow-x: hidden; ">
        <table id="tblgroup2">
          <tr>
            <td><input type="checkbox" id="vehicle1" name="vehicle13" value="Bike12"></td>
            <td><label for="vehicle1">CCC</label></td>
          </tr>

          <tr>
            <td><input type="checkbox" id="vehicle1" name="vehicle14" value="Bike13"></td>
            <td><label for="vehicle1">DDD</label></td>
          </tr>

        </table>
      </div>
    </fieldset>
  </div>

</div>

Solution

You could locate all the TRs of the rows that contain a checked checkbox, and append them to the other table (thanks Barmar).

let checkedRows = $('#tblgroup2 input:checked').closest('tr');
$("#tblgroup1").append(checkedRows);

Answered By - James