JSFiddle - React, Tailwind, and code Playground

HTML

<!-- when clicked on the hyperlink, store the hyperlink id value (id value is an unsigned integer)  -->
<!-- print the stored id from hyperlink into the value="{unsigned integer id}" part of input ( type:text and id="parent_id" )-->
<!-- focus on comment form's input ( type:text and id="focus_id" )  -->
<!-- print preset message between span tags ( span tag id="print_id"  ) -->

<a class="rep"  href="#focus_id" onclick="reply_comment(this.id);" id="6" rel="nofollow">reply comment</a>

<p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p>


<span class="red" id="print_id"></span>
<form>
    <label for="focus_id">Focus the cursor below</label>
	<input  type="text" id="focus_id" name="focus_id">
    <label for="parent_id">Paste parent_id below</label>
	<input  type="text" id="parent_id" name="parent_id" value="">
</form>

CSS

label {display:block;clear:both;}
input {margin-bottom:20px;}
.red { color: #ff0000; }

JavaScript

function reply_comment (id) {
	var LinkId = document.getElementById('parent_id');    
	LinkId.value = id;
	var message = document.createTextNode(" is being replied by the time being.");
	document.getElementById('print_id').appendChild(message);
	document.getElementById("focus_id").focus();
}