如何显示注释，如父注释和子注释

我有一个注释表单：

如果用户输入注释，则表示我要插入值如果用户点击回复按钮，意味着我想在显示子评论的同时，在父评论附近显示该表单

现在我只有html表单。我想获得这样的

我的HTML表单

<div class="post-block post-comments clearfix" style="margin:10px">
    <h3 class="heading-primary comments"><i class="fa fa-comments"></i>Comments (10)</h3>
    <form method="POST" id="commentForm" novalidate="novalidate">
    <div class="row">
      <div class="form-group">
        <div class="col-md-6">
          <label>Your name *</label>
          <input type="text" required="" id="name" name="name" class="form-control" maxlength="100" data-msg-required="Please enter your name." value="" aria-required="true">
        </div>
        <div class="col-md-6">
          <label>Your email address </label>
          <input type="email"  id="email" name="email" class="form-control" maxlength="100" data-msg-email="Please enter a valid email address." data-msg-required="Please enter your email address." value="" aria-required="true">
        </div>
      </div>
    </div>
   
    <div class="row">
      <div class="form-group">
        <div class="col-md-12">
          <label>Comment *</label>
          <textarea required="" id="message" name="message" class="form-control" rows="5" data-msg-required="Please enter your comment." maxlength="5000" aria-required="true" placeholder="Enter comment here"></textarea>
        </div>
      </div>
    </div>
    <div class="row" style="margin-top:10px">
      <div class="col-md-12">
        <input type="submit" data-loading-text="Loading..." class="btn btn-primary btn-lg mb-xlg" id="post-comment" value="Post Comment">
      </div>
    </div>
   </form>
    <ul class="comments">
      <li>
        <div class="comment">
          <div class="img-thumbnail">
            <img class="avatar" alt="" src="../TV/dist/img/user2-160x160.jpg">
          </div>
          <div class="comment-block">
            <div class="comment-arrow"></div>
            <span class="comment-by">
              <strong>Kani</strong>
              <span class="pull-right">
                <span> <a href="#"><i class="fa fa-reply"></i> Reply</a></span>
              </span>
            </span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae, gravida pellentesque urna varius vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae. Sed dui lorem, adipiscing in adipiscing et, interdum nec metus. Mauris ultricies, justo eu convallis placerat, felis enim ornare nisi, vitae mattis nulla ante id dui.</p>
            <span class="date pull-right">January 12, 2013 at 1:38 pm</span>
          </div>
        </div>
        <ul class="comments reply">
          <li>
            <div class="comment">
              <div class="img-thumbnail">
                <img class="avatar" alt="" src="../TV/dist/img/user2-160x160.jpg">
              </div>
              <div class="comment-block">
                <div class="comment-arrow"></div>
                <span class="comment-by">
                  <strong>John Doe</strong>
                  <span class="pull-right">
                    <span> <a href="#"><i class="fa fa-reply"></i> Reply</a></span>
                  </span>
                </span>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae, gravida pellentesque urna varius vitae.</p>
                <span class="date pull-right">January 12, 2013 at 1:38 pm</span>
              </div>
            </div>
          </li>
          <li>
            <div class="comment">
              <div class="img-thumbnail">
                <img class="avatar" alt="" src="../TV/dist/img/user3-128x128.jpg">
              </div>
              <div class="comment-block">
                <div class="comment-arrow"></div>
                <span class="comment-by">
                  <strong>John Doe</strong>
                  <span class="pull-right">
                    <span> <a href="#"><i class="fa fa-reply"></i> Reply</a></span>
                  </span>
                </span>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae, gravida pellentesque urna varius vitae.</p>
                <span class="date pull-right">January 12, 2013 at 1:38 pm</span>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li>
        <div class="comment">
          <div class="img-thumbnail">
            <img class="avatar" alt="" src="../TV/dist/img/user3-128x128.jpg">
          </div>
          <div class="comment-block">
            <div class="comment-arrow"></div>
            <span class="comment-by">
              <strong>Kani</strong>
              <span class="pull-right">
                <span> <a href="#"><i class="fa fa-reply"></i> Reply</a></span>
              </span>
            </span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <span class="date pull-right">January 12, 2013 at 1:38 pm</span>
          </div>
        </div>
      </li>
      <li>
       <div class="comment">
          <div class="img-thumbnail">
            <img class="avatar" alt="" src="../TV/dist/img/user2-160x160.jpg">
          </div>
          <div class="comment-block">
            <div class="comment-arrow"></div>
            <span class="comment-by">
              <strong>Kani</strong>
              <span class="pull-right">
                <span> <a href="#"><i class="fa fa-reply"></i> Reply</a></span>
              </span>
            </span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <span class="date pull-right">January 12, 2013 at 1:38 pm</span>
          </div>
        </div>
      </li>
    </ul>
  </div>