Because that’s done in javascript, and you have to enqueue that javascript for it to work, as stated in the docs:
If JavaScript is enabled and the comment-reply.js JavaScript is loaded the link moves the comment form to just below the comment.
https://codex.wordpress.org/Function_Reference/comment_reply_link
e.g.
function wpse289875_enqueue_comments_reply() {
if ( is_singular() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'comment_form_before', 'wpse289875_enqueue_comments_reply' );
Also take note of https://codex.wordpress.org/Migrating_Plugins_and_Themes_to_2.7/Enhanced_Comment_Display#Javascript_Comment_Functionality
Edit I suspect the fundamental problem is that the code doesn’t use the same format, and so the needed IDs aren’t present.
For example, the comment reply uses an ID to figure out which comment to put the reply form under, but your HTML has no IDs, see this line in wp-includes/class-walker-comment.php:
<div id="div-comment-<?php comment_ID(); ?>" class="comment-body">
No equivalent exists in your code. At least these IDs need to be present from the looks of it:
- comment-x
- div-comment-x
With the latter being nested inside the former, and x being the ID of that comment.
Note that at any point you can switch to one of the default themes in a test environment such as a local dev env to get the default working HTML, or by looking at the comment walker class in core at wp-includes/class-walker-comment.php
For reference, you can also override the moveform function used as defined here:
https://github.com/WordPress/WordPress/blob/master/wp-includes/js/comment-reply.js#L213
It’s added to the main window object, so you can replace it with your own copy with extra debugging output, or different mechanics