[Solved]-JavaScript/D3: Create floating textbox on click and update graph from textbox input-d3.js

var svg = d3.select("#d3_line").append("svg")
            .attr("width", 800)
            .attr("height", 800);
line1 = {
    "x1": 100,
    "y1": 50,
    "x2": 750,
    "y2": 500
};
line2 = {
    "x1": 100,
    "y1": 200,
    "x2": 750,
    "y2": 650
};
var data = [];
data.push(line1);
data.push(line2);
var lineID = "";

function update() {
    d3.select("#" + lineID).attr("x1", $("#new_x1").val());
    $("#new_x1").remove();
}

for (var i = 0; i < data.length; i++) {
    var line = d3.select("svg")
        .append("svg:line")
        .attr("id", ("line" + i))
        .attr("x1", data[i].x1)
        .attr("y1", data[i].y1)
        .attr("x2", data[i].x2)
        .attr("y2", data[i].y2)
        .style("stroke", "black")
        .style("stroke-width", 6)
        .on("click", function () {
            $(".externalObject").remove();
            lineID = d3.select(this).attr("id");
            svg.append("foreignObject")
                .attr("class", "externalObject")
                .attr("x", (d3.event.pageX - 20) + "px")
                .attr("y", (d3.event.pageY - 40) + "px")
                .attr("width", 200)
                .attr("height", 100)
                .append("xhtml:div")
                .html("<input type='text' id=new_x1 placeholder='input new x1 here' onchange=update()></input>");
        });
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>

<div id="d3_line"></div>