JQuery form submission generates a new form

Question

I have a JQuery script that submits user input to a PHP script in the same file, and then displays the result of what the PHP script does with the input. That part works fine. The issue that I’m having is that, upon submission, the JQuery script (at least, I think it's the script) also generates a new submission box below the original.

I’m not sure why. I thought at first that it was an issue with the input type, with the asynchronous part, or even with where I had the form in the overall code, but none of those seem to be playing any role. I'm still a beginner and I'm just not seeing the issue.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<form id = "my_form">
verb <input type = "text" id ="word1"/>
<input type = "submit"/></form>
<div id="name"></div>
<script>
$(document).ready(function(){
    $("#my_form").on('submit', function(e)
{
    e.preventDefault();
    var verb = $ ("#word1").val();
    var tag = "#Latin ";
    var url = "http://en.wiktionary.org/wiki/"+verb+tag;
        $.ajax({
            url: "Parser.php",
            data: {"verb": verb},
            type: "POST",
            async: true,
            success: function(result){
                       $("#name").html(result);
                       $("#name").append(url);

                    }
        });
 });
});</script>

RESULT:

PHP

<?php 

    $bank = array();
    function endsWith($haystack, $needle) {
        return $needle === "" || (($temp = strlen($haystack) - strlen($needle)) >= 0 && strpos($haystack, $needle, $temp) !== false);
    }
    function check_end_array($str, $ends)
    {
       foreach ($ends as $try) {
         if (substr($str, -1*strlen($try))===$try) return $try;
       }
       return false;
    }
    function db_connect() {

        static $connection;

        if(!isset($connection)) {
            $connection = mysqli_connect('127.0.0.1','username','password','Verb_Bank');
        }

        if($connection === false) {
            return mysqli_connect_error(); 
        }
        return $connection;
    }
    function db_query($query) {
        $connection = db_connect();
        $result = mysqli_query($connection,$query);

        return $result;
    } 

    function db_quote($value) {
            $connection = db_connect();
            return "'" . mysqli_real_escape_string($connection,$value) . "'";
        }
    $y = false;
    if (isset($_POST['verb'])){
    $y=db_quote($_POST['verb']);
    echo $y;
    echo "\n";

    $m = db_query("SELECT `conjugation` FROM normal_verbs WHERE (" . $y . ")  LIKE CONCAT('%',root,'%')");
    if($m !== false) {
        $rows = array();
        while ($row = mysqli_fetch_assoc($m)) {
            $rows[] = $row;
            }
    }
    foreach ($rows as $key => $value){
        if (in_array("first",$value)==true){
        echo "first conjugation verb\n";}
        $y = $_POST["verb"];
        $x = $y;
        foreach ($bank as $key => $value) 
           (series of IF-statements) 
    }}?>

Answer 1

As Roamer-1888 says's the problem lies in server side, you are returning a html which has a input too. You need to change your code to return only the result string which you append to the div. Else if this is not possible doing at server side as it might require you to change lot of code, then you can strip off the input element from the result and then append it to the div. Like below.

 success: function(result){
                   var div = document.createElement('div');
                   div.innerHTML = result;
                   $(div).find('input').remove();

                   $("#name").html(div.innerHTML);
                   $("#name").append(url);

                }