如何在jquery中重复多次的div部分中显示相应的名称？

Question

I have written a code in jquery for displaying a particular <div> section multiple times which contains format for displaying names.

First I have a form for entering the names and age as shown below :

<form action="" method="post" name="person" id="addperson">
    <div>
        <div class="form-group col-md-12">
            <label for="exampleInputEmail1">First Name</label>
            <input type="text" class="form-control" name="fname" id="fnname" placeholder="First Name" required>
            <div class="clearfix"></div>
        </div>
        <div class="form-group col-md-12">
            <label for="exampleInputEmail1">Last Name</label>
            <input type="text" class="form-control" name="lname" id="lnname" placeholder="Last Name" required>
            <div class="clearfix"></div>
        </div>
        <div class="form-group col-md-7">
            <label for="exampleInputEmail1" class="ctred">Age only if under 18</label>
            <input type="text" class="form-control" name="age" id="aage" placeholder="Age" required>
            <div class="clearfix"></div>
        </div>
        <button type="submit" id="senddata" name="send" class="btn btn-primary mag_top2">Submit</button>
    </div>
</form>

The above code is for entering the names and age when clicking the submit button , it should enter the values into the database. For each values of names and age, a <div> section is displayed with the corresponding names entered. The div section is shown below in the #pern appended:

$(document).ready(function(){
    $("#senddata").click(function(e) {
        $.ajax({
            type    : "POST",
            url     :  "data2.php",
            data    : dataString,
            cache   : false,
            success : function(result1){
                var fname = firstname;
                var lname = lastname;
                var fullname = fname.concat(" ",lname); 
                document.getElementById("fullname").innerHTML = fullname;
                //$("#fullname").html(fullname);
            }
        });
        $('#addperson').trigger("reset");

        $("#pern").append(
            "<div class='pad pen col-xs-12 col-sm-12 col-md-12 pern alert' id='bloc_style'>\
                <div class='pad col-xs-12 col-md-6'>\
                    <h4 id='fullname'></h4>\
                </div>\
                <div class='pad col-md-5'>\
                    <span class='next-step'>\
                        <button class='ret_but butt label label-primary' id='equipment' name='equipment' type='button'>Select Equipment</button>\
                    </span>\
                    <div class='status'>\
                        <b>Status</b><i class='open' id='open'>Open</i>\
                    </div>\
                </div>\
                <div class='pad col-md-1'>\
                    <button aria-hidden='true' data-dismiss='alert' class='closee' id='garbage' type='button'> \
                        <i class='fa fa-trash-o' aria-hidden='true'></i>\
                    </button>\
                </div>\
            </div>");
    }); 
});

For each names which I have entered in the form, it should display in the div given in #pern with the name. But with this code, for each name entered and clicking the submit button a div section is created but the name entered will be displayed in the previous div section displayed replacing the previous name entered. How to avoid this ? I want to display the name in the corresponding box only not replacing the previous box with the previous name.

Answer 1

You cannot have the same id of an element over and over. That's why your value gets replaced. You should use a class to select your element and do like this :

$("div.pad:last").find('.fullname').html(fullname);