Styjun

I have a number of textareas and when I click on a paragraph outside the text is supposed to be added to the textarea, it works but the text is also getting added to the textareas above.

I'm a bit stumped on why this is happening and as I have 10 textaraes so clicking a paragraph at the bottom of the page adds the text to all the other textareas above.

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`;
 );
 );
); 

Example of 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> 

All other code is the same except the sames are different

Ok silly mistake, I had all 'data-item' the same should have been 'data-item-one', 'data-item-two' etc