如何在html中的两个div之间画线

我正在为传销概念开发一棵树。

我一直致力于显示从显示用户层次结构的数据库中获取的树。现在我想将父母与孩子联系起来。它是一棵二叉树，所以每个父母都有两个孩子。

我的代码在 JsFiddle：https ://jsfiddle.net/7u9L1bfx/

和 Jsfiddle 的 CSS

<center>
  <div style='width:60%'>
    <div class='user' id='1'>
      <p> 1 </p>
    </div>
    <div style='clear:both;'></div>
    <div class='col2 child' id='1'>
      <div class='user'>
        <p>2</p>
      </div>
    </div>
    <div class='col2 child' id='1'>
      <div class='user'>
        <p>5</p>
      </div>
    </div>
    <div style='clear:both;'></div>
    <div class='col3 child' id='2'>
      <div class='user'>
        <p>3</p>
      </div>
    </div>
    <div class='col3 child' id='2'>
      <div class='user'>
        <p>4</p>
      </div>
    </div>
    <div class='col3 child' id='5'>
      <div class='user'>
        <p>6</p>
      </div>
    </div>
    <div class='col3 child' id='5'>
      <div class='user'>
        <p>8</p>
      </div>
    </div>
    <div style='clear:both;'></div>
    <div class='col4 child' id='3'>
      <div class='user'>
        <p>Blank</p>
      </div>
    </div>
    <div class='col4 child' id='3'>
      <div class='user'>
        <p>Blank</p>
      </div>
    </div>
    <div class='col4 child' id='4'>
      <div class='user'>
        <p>Blank</p>
      </div>
    </div>
    <div class='col4 child' id='4'>
      <div class='user'>
        <p>Blank</p>
      </div>
    </div>
    <div class='col4 child' id='6'>
      <div class='user'>
        <p>7</p>
      </div>
    </div>
    <div class='col4 child' id='6'>
      <div class='user'>
        <p>Blank</p>
      </div>
    </div>
    <div class='col4 child' id='8'>
      <div class='user'>
        <p>Blank</p>
      </div>
    </div>
    <div class='col4 child' id='8'>
      <div class='user'>
        <p>Blank</p>
      </div>
    </div>
    <div style='clear:both;'></div>
  </div>
</center>

我需要一个可以简单地画线的 css/javascript/jquery 函数。我会自己把它放到循环中。