Create Svg line inside a cell of table using jquery or javascript in a node js application

Question

I only have basic knowledge of svg,

I am trying to create a line inside a table cell. What I have achieved so far is, created the SVG Tag with the height and width as same as a table cell(SVG tag have dimensions ), and created a line tag within the SVG(Tag is in the DOM But with dimensions (0*X)). Attaching the DOM portion

  <svg class="history-svg" width="100%" height="34.83" style="display: block; height: 34.83px;">
    <line x1="6.25%" y1="50%" x2="92%" y2="50%" stroke="#D6D9D8" stroke-width="1px"></line>
  </svg>

Output Image

I tried to edit SVG tag attributes using chrome inspect HTML editor functionality, appended viewport with value 0 0 0 0. the SVG-line was visible(with dimensions). but when I tried to append using the js and from the console, there was no effect

  <svg viewPort='00 0 0' class="history-svg" width="100%" height="34.83" style="display: block; height: 34.83px;">
        <line x1="6.25%" y1="50%" x2="92%" y2="50%" stroke="#D6D9D8" stroke-width="1px"></line>
  </svg>

Output after editing SVG as an HTML from chrome inspact

Attaching the at most possible part of the code from the javascript file responsible for creating the SVG tag:

const historySVGTag = $('<svg>').addClass('history-svg').attr('width','100%').attr('height',svgHeight).css('display' ,'block').css('height' ,svgHeight+'px')

historySVGTag.append($('<line>').attr('x1','6.25%').attr('y1','50%').attr('x2','92%').attr('y2','50%').attr('stroke','#D6D9D8').attr('stroke-width','1px'))

var cellSelector = '#tableID tbody tr#'+item.id+' td.col-2'

$(cellSelector).append(historySVGTag)