to help others deal with a problem, there is a preliminary solution, but why it will cause this kind of reason has been considered. I hope there is a boss to solve the problem

Don"t say much, go to the code

related codes

< div class= "con" >

    <div>
        <b class="dele"></b>
        <p id="first"><span class="change" data-id="1" id="1"></span>

        <input type="text" placeholder="">
    </div>
    <div>
        <b class="dele"></b>
        <p id="second"><span class="change" data-id="2" id="2"></span>

        <textarea name="" id="" cols="40" rows="5" placeholder=""></textarea>
    </div>
    <div>
        <b class="dele"></b>
        <p id="third"><span class="change" data-id="3" id="3"></span>

        <input type="file" name="" id="">
    </div>
    <div class="banner">
        <input type="text" id="input">
        <button type="button" id="button"></button>
    </div>
</div>

this is part of the html code.

JS:
<script src="jquery-1.8.3.min.js"></script>
    <script>
        $(() => {

            (function() {

                
                $(".con").on("click", "span", function() {

                    var val = $(this).attr("id");
                    let p = $(this).parent();
                    var va = $(this).parent().attr("id");
                    let clone = $(this).clone();
                    (function(va) {
                        $(".banner").css("display", "block");

                        $("-sharpbutton").on("click", function(e) {

                            let vals = $("-sharpinput").val();
                            console.log(va);
                            switch (va) {

                                case "first":
                                    console.log(1, "i am a first");
                                    $("-sharpfirst").text(vals);
                                    $("-sharpfirst").append(clone);
                                    $(".banner").css("display", "none");
                                    event.preventDefault;
                                    break;
                                case "second":
                                    $("-sharpsecond").text(vals);
                                    $("-sharpsecond").append(clone);
                                    $(".banner").css("display", "none");
                                    break;
                                case "third":
                                    $("-sharpthird").text(vals);
                                    $("-sharpthird").append(clone);
                                    $(".banner").css("display", "none");
                                    break;

                            }
                        })


                    })(va)
                    // for (let i = 0; i < arr.length; iPP) {

                    //     if (arr[i] == va) {
                    //         str = arr[i];
                    //         break;
                    //     }

                    // }






                })







            })()




        })
    </script>

//CSS
<style>
        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        
        .con {
            width: 500px;
            height: 500px;
            border: 1px solid -sharpccc;
            margin: 0 auto;
            margin-top: 50px;
            position: relative;
        }
        
        .banner {
            width: 200px;
            height: 200px;
            border: 1px solid -sharpccc;
            position: absolute;
            z-index: 10px;
            display: none;
        }
        
        .banner input {
            margin-left: 30px;
            margin-top: 30px;
        }
    </style>

as the code shows, the effect looks like this:

P

:

I"ve probably locked the problem. To put it simply, I only go to first once at a time and then output second, but then it changes together. This is not the result I want to see, but I already have a solution. I hope that some bosses can come up with more solutions, but the most important thing is to tell the younger generation why this is the case. This is what the younger generation is eager to know.