I have an HTML table which I would like to create a function that takes a row with a specific id, and moves it to the top of the table. I'm not even sure where to begin, but here is the code I am using:

```
function App() {

  function changeRow(id){
    //Move row with "id" to top of table
  }

  return (
    <div className="App">
      <table>
        <tbody>
          <tr id='row1'>
            <td><b>Value 1</b></td>
            <td>Description 1</td>
            <td><button onClick={()=>changeRow('row1')}>Change Row</button></td>
          </tr>
          <tr id='row2'>
            <td><b>Value 2</b></td>
            <td>Description 2</td>
            <td><button onClick={()=>changeRow('row2')}>Change Row</button></td>
          </tr>
          <tr id='row3'>
            <td><b>Value 3</b></td>
            <td>Description 3</td>
            <td><button onClick={()=>changeRow('row3')}>Change Row</button></td>
          </tr>
          <tr id='row4'>
            <td><b>Value 4</b></td>
            <td>Description 4</td>
            <td><button onClick={()=>changeRow('row4')}>Change Row</button></td>
          </tr>
        </tbody>
      </table>

    </div>
  );
}

```

And here is the code sandbox:

<https://codesandbox.io/s/thirsty-leftpad-vvrmz>

Thanks!!