jquery - how to move td to another td

I have a table like this.

<table>
    <tr>
        <td>A</td>
        <td><select id="B" name="B">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        </select>
        </td>
        <td>C</td>
        <td>D</td>
    </tr>
    <tr>
        <td>E</td>
        <td class="sample">F: will hide/show</td>
        <td class="sample">G: will hide/show</td>
        <td>H</td>
    </tr>
    <tr>
        <td>I</td>
        <td class="id1">J</td>
        <td class="id1">K</td>
        <td>L</td>
    </tr>
    <tr>
        <td>M</td>
        <td class="id2">N</td>
        <td class="id2">O</td>
        <td>P</td>
    </tr>
</table>

Then, whenever I change the value in <td>B select option , <td>F and <td>G will hide.. It will then move up belows <td>...
<td>J & <td>K to <td>F & <td>G ,
<td>N & <td>O to <td>J & <td>K ,

Opposite happens if <td>F and <td>G will be shown.. other <td> will move down

here is the jquery ive started.

$('select#B').change(function(event) {

          if (this.value == '2') {
                $(".sample").show();
          } else {
                $(".sample").hide();
          }
        });

http://ift.tt/2kYnown