Question: Inside the div I have a set of p elements. I want to drag the selected element to the input
Example:

```js
var input = document.getElementById("test");
input.addEventListener('drop', function (event) {
    event.preventDefault();
    var textData = event.dataTransfer.getData('text'); // get the dragged value
    var oldval = event.target.value; // get the old value in the input
    var newval = oldval + textData; // add it with the value which is dragged upon
    event.target.value = newval; // change the value with the new value
});
document.querySelector('[draggable="true"]').addEventListener('dragstart', function(e){
  e.dataTransfer.setData('text', e.target.innerHTML);
});
```

```html
<input id="test" placeholder='drag here'/>

<div>

<p draggable="true"> Tag 1</p>

<p draggable="true"> Tag 2</p>

<p draggable="true" > Tag 3</p>

</div>
```

I want to transfer the text from the p element to the input when dragging, but in a multiple way, for all the p elements

How, when dragging any of the multiple elements, get the text from the p element and place it in input, and switch between them in case another element is selected via JavaScript or JQuery

Answer: 
With `querySelector` you only target the first element, use [querySelectorAll](https://developer.mozilla.org/de/docs/Web/API/Document/querySelectorAll) to get a list of all paragraphs, then bind the event to each of the paragraphs

```js
var input = document.getElementById("test");
input.addEventListener('drop', function(event) {
  event.preventDefault();
  var textData = event.dataTransfer.getData('text'); // get the dragged value
  var oldval = event.target.value; // get the old value in the input
  var newval = oldval + textData; // add it with the value which is dragged upon
  event.target.value = newval; // change the value with the new value
});
document.querySelectorAll('[draggable="true"]').forEach(paragraph => {
  paragraph.addEventListener('dragstart', function(e) {
    e.dataTransfer.setData('text', e.target.innerHTML);

  })
});
```

```html
<input id="test" placeholder='drag here' />

<div>

  <p draggable="true"> Tag 1</p>

  <p draggable="true"> Tag 2</p>

  <p draggable="true"> Tag 3</p>

</div>
```
I would delegate

```js
var input = document.getElementById("test");
input.addEventListener('drop', function(event) {
  event.preventDefault();
  var textData = event.dataTransfer.getData('text'); // get the dragged value
  var oldval = event.target.value; // get the old value in the input
  var newval = oldval + textData; // add it with the value which is dragged upon
  event.target.value = newval; // change the value with the new value
});
document.getElementById('dragContainer').addEventListener('dragstart', function(e) {
  const tgt = e.target;
  if (tgt.getAttribute("draggable") === "true") {
    e.dataTransfer.setData('text', tgt.innerHTML);
  }  
});
```

```html
<input id="test" placeholder='drag here' />

<div id="dragContainer">

  <p draggable="true"> Tag 1</p>

  <p draggable="true"> Tag 2</p>

  <p draggable="true"> Tag 3</p>

</div>
```