Onclick文本填充两个文本区域

Question

我有一些文本区域，当我点击文本之外的段落时，它会被添加到文本区域中，但文本也会添加到上面的文本区域中。

我有点困惑为什么会发生这种情况，因为我有10个文本，所以点击页面底部的一个段落，就会将文本添加到上面所有其他文本中。

Javascript

$(document).ready(function () {
    $("#PollutionPreventionDivScrollDisplay").hide();

    $("#PollutionPreventionDivScroll").on("click", function () {
        $("#PollutionPreventionDivScrollDisplay").toggle();
    });

    var cartlist = document.querySelector("#EnvironmentalActionPollutionPreventionIdeasForAction");
    var items = document.querySelectorAll("[data-item]");

    [].forEach.call(items, function (item) {
        item.addEventListener("click", function (e) {
            e.preventDefault();
            cartlist.value += `\n${item.innerHTML}`;
        });
    });
});
$(document).ready(function () {
    $("#WasteDivScrollDisplay").hide();

    $("#WasteDivScrollDisplayScroll").on("click", function () {
        $("#WasteDivScrollDisplay").toggle();
    });

    var cartlistOne = document.querySelector("#EnvironmentalActionWasteManagementIdeasForAction");
    var itemsOne = document.querySelectorAll("[data-item]");

    [].forEach.call(itemsOne,
        function (itemOne) {
            itemOne.addEventListener("click", function (e) {
                e.preventDefault();
                cartlistOne.value += `\n${itemOne.innerHTML}`;
            });
        });
});
$(document).ready(function () {
    $("#EnergyDivScrollDisplay").hide();

    $("#EnergyDivScrollDisplayScroll").on("click", function () {
        $("#EnergyDivScrollDisplay").toggle();
    });

    var cartlistTwo = document.querySelector("#EnvironmentalActionEnergyIdeasForAction");
    var itemsTwo = document.querySelectorAll("[data-item]");

    [].forEach.call(itemsTwo,
        function (itemTwo) {
            itemTwo.addEventListener("click", function (c) {
                c.preventDefault();
                cartlistTwo.value += `\n${itemTwo.innerHTML}`;
            });
        });
}); 

html示例

<div class="row">
        <div id="PollutionPreventionDivScrollDisplay" class="col-md-12 border-colour fixed-height">
            @foreach (var info in Model.EnvironmentalActionPollutionPreventionExtraInfo)
            {
                var countItems = counter++;
                <p><a data-item="@countItems" href="#">@info</a></p>
            }
        </div>
    </div>  

 <div class="col-md-4 border-colour-right">
            <div class="form-group">
                <span class="mouse-pointer text-danger" id="PollutionPreventionDivScroll">Click to add options</span>
                <label class="sr-only" for="EnvironmentalActionPollutionPreventionIdeasForActionPlaceholder">Environmental Action Pollution Prevention Ideas For Action</label>
                @Html.TextAreaFor(x => x.EnvironmentalActionPollutionPreventionIdeasForAction, new { Class = "form-control", Placeholder = Model.EnvironmentalActionPollutionPreventionIdeasForActionPlaceholder, rows = "8" })
            </div>
        </div> 

除了相同的代码不同之外，所有其他代码都是相同的

Answer 1

好吧，愚蠢的错误，我把所有的'data-item‘都一样，应该是'data-item-one'，’data-item-2‘等等