How to fix drag and drop quiz?

Question

I need help with my drag and drop quiz that works for me.

I have two mistakes in it. The first one is that the text that drags to the box won't stay there for me and the second mistake is that it doesn't count down my score when I move it to the right box where it should belong, so nothing happens.

I need to consult with the team because I don't know what a team is. I apologize in retrospect that it is in Czech and not in English, but I didn't want to rewrite it anymore.

Thank you for your help.

var score = 0;
var doprava = ['Doprava'];
var zdravotnictvi = ['Zdravotnictví'];
var autprumysl = ['Automobilový průmysl'];
var finance = ['Finance']
var scoreElement = document.querySelector(".score");

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("Text");
  if (ev.target.doprava == 'textBox3' && doprava.indexOf(data) != -1) {
    score++;
    scoreElement.innerHTML = score.toString() + "/4";
    ev.target.appendChild(document.getElementById(data));
  }
  if (ev.target.zdravotnictvi == 'textBox2' && zdravotnictvi.indexOf(data) != -1) {
    score++;
    scoreElement.innerHTML = score.toString() + "/4";
    ev.target.appendChild(document.getElementById(data));
  }
  if (ev.target.finance == 'textBox4' && finance.indexOf(data) != -1) {
    score++;
    scoreElement.innerHTML = score.toString() + "/4";
    ev.target.appendChild(document.getElementById(data));
  }
  if (ev.target.autprumysl == 'textBox1' && autprumysl.indexOf(data) != -1) {
    score++;
    scoreElement.innerHTML = score.toString() + "/4";
    ev.target.appendChild(document.getElementById(data));
  }
}

<div id="module">
  <br>
  <img src="{{ url_for('static', filename='modules/OdvetviTechnologie/Automobil.Prumysl.png') }}" width="320" height="200" />
  <img src="{{ url_for('static', filename='modules/OdvetviTechnologie/Zdravotnictvi.png') }}" width="320" height="200" />
  <img src="{{ url_for('static', filename='modules/OdvetviTechnologie/Doprava.png') }}" width="320" height="200" />
  <img src="{{ url_for('static', filename='modules/OdvetviTechnologie/Finance.png') }}" width="320" height="200" />
  <br>
  <br>
  <div id="textBox1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div id="textBox2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div id="textBox3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div id="textBox4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <br>
  <br>
  <div id="drag">
    <span class="span" id="doprava" draggable="true" ondragover="drag(event)">Doprava</span>
    <span class="span" id="zdravotnictvi" draggable="true" ondragover="drag(event)">Zdravotnictví</span>
    <span class="span" id="autprumysl" draggable="true" ondragover="drag(event)">Automobilový průmysl</span>
    <span class="span" id="finance" draggable="true" ondragover="drag(event)">Finance</span>
  </div>
  <br>
  <p style="font-size:20px; text-align: center;" class="score">0/0</p>
</div>

Answer 1

See updated Snippet below:

var score = 0;
var scoreElement = document.querySelector(".score");

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("Text");
  if (data == ev.target.getAttribute("data-id")) {
    score++;
    scoreElement.innerHTML = score.toString() + "/4";
    ev.target.appendChild(document.getElementById(data));
  }
}

#textBox1, #textBox2, #textBox3, #textBox4 {
  border: 1px solid black;
  height: 20px;
}

<div id="module">
  <br>
  <img src="{{ url_for('static', filename='modules/OdvetviTechnologie/Automobil.Prumysl.png') }}" width="320" height="200" />
  <img src="{{ url_for('static', filename='modules/OdvetviTechnologie/Zdravotnictvi.png') }}" width="320" height="200" />
  <img src="{{ url_for('static', filename='modules/OdvetviTechnologie/Doprava.png') }}" width="320" height="200" />
  <img src="{{ url_for('static', filename='modules/OdvetviTechnologie/Finance.png') }}" width="320" height="200" />
  <br>
  <br>
  <div id="textBox1" ondrop="drop(event)" ondragover="allowDrop(event)" data-id="autprumysl"></div>
  <div id="textBox2" ondrop="drop(event)" ondragover="allowDrop(event)" data-id="zdravotnictvi"></div>
  <div id="textBox3" ondrop="drop(event)" ondragover="allowDrop(event)" data-id="doprava"></div>
  <div id="textBox4" ondrop="drop(event)" ondragover="allowDrop(event)" data-id="finance"></div>
  <br>
  <br>
  <div id="drag">
    <span class="span" id="doprava" draggable="true" ondragstart="drag(event)">Doprava</span>
    <span class="span" id="zdravotnictvi" draggable="true" ondragstart="drag(event)">Zdravotnictví</span>
    <span class="span" id="autprumysl" draggable="true" ondragstart="drag(event)">Automobilový průmysl</span>
    <span class="span" id="finance" draggable="true" ondragstart="drag(event)">Finance</span>
  </div>
  <br>
  <p style="font-size:20px; text-align: center;" class="score">0/0</p>
</div>