javascript - 如何给不同的 append 元素添加js代码？

Question

我有这个代码(片段)。如果您输入您的姓名，它会自动添加到下面。

如果您单击“添加成员”并在 append 输入中键入名称，该名称也会出现在下方(在其各自的“Hello，...”上)

如果再这样做一次，这次就不行了，因为jscode只适用于第一个 append 元素。

我的问题是:如何将此 jscode 应用于第三个或第四个成员，依此类推？

PS。另一个问题:如何使其无法删除第一个输入文本(因此需要至少有 1 个成员)？

var name1 = document.getElementById('first');
name1.addEventListener('input', function() {
    var result = document.querySelector('span.one');
    result.innerHTML = this.value;
});

$('.add').click(function() {
    $('.block:last').after('<div class="block"><input type="text" id="X"><span class="remove">Remove member</span><br><br></div>');
    $('.hello:last').after('<div class="hello">Hello, <span class="name"></span><br><br></div>');
    var name1 = document.getElementById('X');
    name1.addEventListener('input', function() {
        var result = document.querySelector('span.name');
        result.innerHTML = this.value;
    });
});

$('.optionBox').on('click', '.remove', function() {
    $(this).parent().remove();
    $('.hello:last').remove();
});

.block {
    display: block;
}
input {
    width: 50%;
    display: inline-block;
}
span.add, span.remove {
    display: inline-block;
    cursor: pointer;
    text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="optionBox">

    <div class="block">
        <span class="add">Add member</span>
       <br><br>
        
    </div>
    
    <div class="block">
        <input type="text" id="first"> <span class="remove">Remove member</span><br><br>
    </div>


</div>

<div class="newmember">

</div>

<br>

<div class="hello">

Hello, <span class="one"></span><br><br>

</div>

Answer 1

我已经为你做了一些锻炼。请检查一下。我想这就是您正在寻找的。我为输入和 div 添加相同的 id 和类 attr 以显示内容。

$(document).ready(function() {
  var max_fields = 20; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID

  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      $(wrapper).append('<div class ="' + x + '" ><input type="text" class= "' + x + '" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
      $('.hello:last').after('<div class="hello" id = "' + x + '"   >Hello, <span class="name"></span><br><br></div>');

      $('input').on('input', function(e) {

        divtoappend = $(this).attr('class');
        var val = "";
        var val = $(this).val();
        var sel = "#" + divtoappend + " span";
        $(sel).text('');
        $(sel).append(val);
      });

    }
  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    var rem = $(this).parents('div').attr('class');
    $('#' + rem).remove();
    $(this).parent('div').remove();
    x--;
  });


});

.block {
    display: block;
}
input {
    width: 50%;
    display: inline-block;
    margin : 4px;
}
span.add, span.remove {
    display: inline-block;
    cursor: pointer;
    text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="input_fields_wrap">
  <button class="add_field_button">Add More Fields</button>
  <div><input type="text" class="1" name="mytext[]"></div>
</div>

<div class="hello" id="1">

  Hello, <span class="1"></span><br><br>

</div>