隐藏和显示带有复选框的“其他”选项

Question

我正在尝试使此代码正常工作，但我不知道该怎么做...当我单击Outro时，上格关闭，而当我单击Outra 在下方上方关闭。 我不知道我在做什么错，因为该函数具有不同的值，并且如果它只是一个函数，那么它将起作用。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="checkbox-inline" for="checkboxes-4">
        <input type="checkbox" name="checkboxes" id="checkboxes-4" value="5">
        Outro
    </label>
<input type="text" maxlength="9" class="input-field4" id="input" name="teste">
</td>
</tr>
<script>
  $(document).ready(function() {
    $('#input').hide();
    $(document).on('change', 'input[type="checkbox"]', function(e) {
      console.log(e)
      if (e.target.id == "checkboxes-4" && e.target.checked) {
        $('#input').show();
      } else {
        $('#input').hide();
      }
    });
  });
</script>

<tr>
  <th>Doenças</th>
  <label class="checkbox-inline" for="checkboxes-7">
            <input type="checkbox" name="checkboxes" id="checkboxes-7" value="8">
            Outra
        </label>
  <input type="text" maxlength="9" class="input-field4" id="input1" name="teste1">
  </td>
</tr>

<tr>
  <th>Contacto em caso de emergência</td>
    <td><input type="text" name="contacto_emergencia" value="<?php echo $contacto_emergencia;?>" /></td>
</tr>

</table>
<br>
<p align=right>
  <button type="submit" value="Alterar">Alterar</button>
  <button type="cancel" onclick="window.location='http://donutsrool.pt/ficha_aluno.php';return false;">Cancelar</button>
</p>
</form>
</div>
</div>
</div>
</div>
<script>
  $(document).ready(function() {
    $('#input1').hide();
    $(document).on('change', 'input[type="checkbox"]', function(e) {
      console.log(e)
      if (e.target.id == "checkboxes-7" && e.target.checked) {
        $('#input1').show();
      } else {
        $('#input1').hide();
      }
    });
  });
</script>