JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
 <input type="text" id="ip1" value="">
    <button onclick="add();">add</button>


    <div id="tree"></div>

CSS

path.link {
            fill: none;
            stroke: #666;
            stroke-width: 1.5px;
        }

        path.textpath {
            fill: none;
            stroke: none;
        }

        marker#licensing {
            fill: green;
        }

        path.link.licensing {
            stroke: green;
        }

        path.link.resolved {
            stroke-dasharray: 0, 2 1;
            /* fill: #ccc; */
            /* stroke: rgb(255, 255, 255); */
        }

        circle {
            fill: #ccc;
            stroke: #333;
            stroke-width: 1.5px;
        }

        text {
            font: 11px sans-serif;
            pointer-events: none;
            font-weight: bold;
        }

        text.shadow {
            stroke: #fff;
            stroke-width: 3px;
            stroke-opacity: .8;
        }
        
        .d-n{
          display:none;
        }

JavaScript

var links = [];
 var dupelinks = [];
        var nodes = {};
        var flag = 0;
        var out = {
            type: "resolved"
        }
        var temp_arr = [];
				function checkIfSourceTargetExists(lnks,d){
        	let arSlug = [];
          //find source
          let exists = lnks.find((el)=>el.sourceId==d.sourceId ||el.targetId==d.sourceId);
          if(exists){
          	//console.log(exists);
            let targetLinks = (exists.sourceId == d.sourceId) ? exists.source.name : exists.target.name;
          	arSlug.push({
                type: "suit",
                source:d.source,
                target:targetLinks,
                label:"n",
                sourceId:d.sourceId,
                targetId:d.sourceId          
            })
          }
          
          //find target
          exists = lnks.find((el)=>el.sourceId==d.targetId ||el.targetId==d.targetId);
          if(exists){
          	//console.log(exists);
            let targetLinks = (exists.sourceId == d.targetId) ? exists.source.name : exists.target.name;
          	arSlug.push({
                type: "suit",
                source:d.target,
                target:targetLinks,
                label:"n",
                sourceId:d.targetId,
                targetId:d.targetId          
            })
          }
          
          return arSlug;
          	
        }
        function add() {
            var str = document.getElementById("ip1").value;
            // ashik)0)love)1)food)2)
            // manu)3)eat)4)gobi)2)
            // sam)5)has)6)manchuri)2)
            // molly)8)has)6)laptop)9)
            //console.log(str.name);
            var obj = {
                type: "suit"
            };

            obj.source = str.split(")")[4];
            obj.target = str.split(")")[0];
            obj.label = str.split(")")[2];
            obj.sourceId = str.split(")")[5];
            obj.targetId = str.split(")")[1];
						//console.log(links[0])
           ...