Add/Remove Checked box row (Javascript/Jquery)

I'm trying to add and remove the text of the cell 2 cells of that row when they are checked.

Let's say they have 4 columns on the table and want to show/hide some row in a different section of the page.

My goal is to add/display and delete/hide the selected row value based on the checkbox value (0|1). And for each row values, it should have a button/link (X) to delete that and uncheck the checkbox in the table.

<h1 style="text-align:center">Selector/Removal</h1>
<h4 class="selected_values"></h4>
<button onclick="clearSelection();">Clear</button>

<table id="" class="table table-bordered table-responsive table-striped">
    <tr class="" style="background-color: #237ec2; color: white;">
      <td class="text-center"><span>A</span></td>
      <td class="text-center"><span>B</span></td>
      <td class="text-center"><span>C</span></td>
      <td class="text-center"><span>D</span></td>

    </tr>

    <tr>
      <td>
        <input type="checkbox" class="usercheck"><span>A1</span></td>
      <td>
        <h5>B1</td>
      <td>
        <h5>C1</h5></td>
      <td>
        <h5>D1</h5></td>

    </tr>
    <tr>
      <td>
        <input type="checkbox" class="usercheck"><span>A2</span></td>
      <td>
        <h5><span class="second_col">B2</span></h5></td>
      <td>
        <h5>C2</h5></td>
      <td>
        <h5>D2</h5></td>

    </tr>
    <tr style="">
      <td>
        <input type="checkbox" class="usercheck">
        <span>A3</span></td>
      <td>
        <h5><span class="second_col">B3</span></h5></td>
      <td>
        <h5>C3</h5></td>
      <td>
        <h5>D3</h5></td>

    </tr>

  </table>

JavaScript that I tried is the below:

   $(document).ready(function() {

            $('.usercheck').change(function() {
                $('.selected_values').empty();
                $(".usercheck:checked").each(function(index) {
                    var chain = "";
                        chain = $(this).html(".usercheck").val();
                        $('.selected_values').append(chain  + '&nbsp;' +  '<a href="#"><span id="removeVal"  style="color:red;">X</span></a>');
                       });
            });

        });
        function clearSelection(){
            $('.selected_values').empty();
            $('.usercheck').attr('checked','false');
        }

Here is the link to the js fiddle which I tried to work. I was able to display the content but by giving value to just one column which is not the right way to do I suppose.

My goal is to add/display and delete/hide the selected row value based on the checkbox value (0|1). And for each row values, it should have a button/link (X) to delete that and uncheck the checkbox in the table.

http://ift.tt/2rLatS3