Drow line when user scroll

Question

I have to animate lines like those shared in the screenshot and I have tried the below code but it's not working for me. I am getting an error in my ID. Would you help me out

 window.addEventListener("DOMContentLoaded",()=>{
function createSVGLine(classN, lineW, lineH){
  let svgns = 'http://www.w3.org/2000/svg';
  let svgElement = document.createElementNS(svgns, 'svg');
  svgElement.classList.add(classN);
  let svgLine = document.createElementNS(svgns, 'line');
  svgLine.setAttribute('x1', '0');
  svgLine.setAttribute('y1', '0');
  svgLine.setAttribute('x2', lineW);
  svgLine.setAttribute('y2', lineH);
  svgElement.appendChild(svgLine);
  return svgElement;
};

  let getLine = document.querySelector('.assessWrap > .eline');
  
  document.querySelectorAll('.assessWrap').forEach((addSvg)=>{
    addSvg.append(createSVGLine("hline", getLine.getBoundingClientRect().width, 0));
    addSvg.append(createSVGLine("vline", 0, getLine.getBoundingClientRect().height));
  });
});
  
window.addEventListener('scroll', function() {
  let scrollTop = window.scrollY;
  let svgWidth = document.querySelector('svg').getBoundingClientRect().width;
  let line = document.getElementById('line');
  let progress = (scrollTop / (document.body.scrollHeight - window.innerHeight)) * svgWidth;
  if (progress <= svgWidth) {
    //line.setAttribute('x2
      line.setAttribute('x2', progress);
  }
});

window.addEventListener('scroll', function() {
  let scrollTop = window.scrollY;
  let svgHeight = document.getElementById('svg').getBoundingClientRect().height;

  let line = document.getElementById('line');
  let progress = (scrollTop / (document.body.scrollHeight - window.innerHeight)) * svgHeight;
  if (progress <= svgHeight) {
    line.setAttribute('y2', progress);
  }
});

 body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
  #content{height:1000px}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div id="content"></div>
<div class="contentWrap container">
    
    <section class="assessWrap">

        <div class="eline">
    <div class="row">
        <div class="col-lg-4"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at dui nec lacus interdum euismod in eget ligula. Donec leo dui, viverra quis purus vel, bibendum ultricies ligula. Cras a vulputate risus. Curabitur ac mi volutpat, consectetur nibh nec,</p></div>
      <div class="col-lg-4"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at dui nec lacus interdum euismod in eget ligula. Donec leo dui, viverra quis purus vel, bibendum ultricies ligula. Cras a vulputate risus. Curabitur ac mi volutpat, consectetur nibh nec,</p></div>
      <div class="col-lg-4"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at dui nec lacus interdum euismod in eget ligula. Donec leo dui, viverra quis purus vel, bibendum ultricies ligula. Cras a vulputate risus. Curabitur ac mi volutpat, consectetur nibh nec,</p></div>
    </div>
    </div>
    </section>
     <section class="assessWrap">
    
        <div class="eline">
     <div class="row">
       <div class="col-lg-4"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at dui nec lacus interdum euismod in eget ligula. Donec leo dui, viverra quis purus vel, bibendum ultricies ligula. Cras a vulputate risus. Curabitur ac mi volutpat, consectetur nibh nec,</p></div>
       <div class="col-lg-4"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at dui nec lacus interdum euismod in eget ligula. Donec leo dui, viverra quis purus vel, bibendum ultricies ligula. Cras a vulputate risus. Curabitur ac mi volutpat, consectetur nibh nec,</p></div>
       <div class="col-lg-4"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at dui nec lacus interdum euismod in eget ligula. Donec leo dui, viverra quis purus vel, bibendum ultricies ligula. Cras a vulputate risus. Curabitur ac mi volutpat, consectetur nibh nec,</p></div>
    </div>
     </div>
    </section>
    <section class="assessWrap">
        <div class="eline">
     <div class="row">
        <div class="col-lg-4"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at dui nec lacus interdum euismod in eget ligula. Donec leo dui, viverra quis purus vel, bibendum ultricies ligula. Cras a vulputate risus. Curabitur ac mi volutpat, consectetur nibh nec,</p></div>
        <div class="col-lg-4"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at dui nec lacus interdum euismod in eget ligula. Donec leo dui, viverra quis purus vel, bibendum ultricies ligula. Cras a vulputate risus. Curabitur ac mi volutpat, consectetur nibh nec,</p></div>
        <div class="col-lg-4"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at dui nec lacus interdum euismod in eget ligula. Donec leo dui, viverra quis purus vel, bibendum ultricies ligula. Cras a vulputate risus. Curabitur ac mi volutpat, consectetur nibh nec,</p></div>
    </div>
     </div>
    </section>
    
</div>