如何将下拉选定的值分配给下一个 td 中存在的输入字段？

Question

在一个表中，我有两列和多行。一列有下拉菜单，其他有数字类型的输入字段。当我更改 drop down 的值时，我想将该选定值分配给 next 中存在的输入字段td。我希望我能解释我的问题。

这是我尝试过的，

$(document).ready(function() {

  $('select.nameSelect').change(function() {

    var id = $(this).children("option:selected").val();

    $(this).closest('.tr').find('.StudentId').val(id);

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>

  <tr>

    <td>

      <select name="StudentName" id="StudentName" class="nameSelect">

        <option value="1">Student1</option>

        <option value="2">Student2</option>

        <option value="3">Student3</option>

        <option value="4">Student4</option>

      </select>

    </td>

    <td>

      <input type="number" class="StudentId" />

    </td>

  </tr>

  <tr>

    <td>

      <select name="StudentName" id="StudentName" class="nameSelect">

        <option value="1">Student1</option>

        <option value="2">Student2</option>

        <option value="3">Student3</option>

        <option value="4">Student4</option>

      </select>

    </td>

    <td>

      <input type="number" class="StudentId" />

    </td>

  </tr>

  <tr>

    <td>

      <select name="StudentName" id="StudentName" class="nameSelect">

        <option value="1">Student1</option>

        <option value="2">Student2</option>

        <option value="3">Student3</option>

        <option value="4">Student4</option>

      </select>

    </td>

    <td>

      <input type="number" class="StudentId" />

    </td>

  </tr>

</table>