Js drag and drop function: how can I move Icons on an image and make them visible on the main image?

Question

I created a drag and drop function that it was supposed to drag and drop several icons(class:items) on a main image. Still, even though icons seem to be dropped on the image, they are not visible. I can't see them on that main image(id:"show-design"). My second problem is that everytime I drop an icon, I would like to display a question. A have 13 questions set with display:'none'. Everytime I drop an icon, I would like to hide the previous question and show the next one. Nevertheless, for the moment a can only move from question 1 to 2, but not to the other questions. I'm new to js. Could you please give me a hint?

drop function

 const drop = () => {
      const design = document.querySelector('img#show-design');
      const i = 0;
        design.addEventListener('drop', (e) => {
          e.preventDefault();
          const id = e.dataTransfer.getData('text/plain');
          const draggable = document.getElementById(id).cloneNode(true);
          draggable.classList.add("dropped");
           // add it to the drop target and clone it
          const append = e.target.appendChild(draggable);
            if(draggable) {
              const questions = document.querySelectorAll("div.questions_card");
                questions.forEach((div) => {
                    questions[i + 1].style.display = 'block';
                    if (i === 0) { // i would become 0
                        questions[i].style.display = 'none';
                      }
                      else {
                      questions[i - 1].style.display = 'none';
                      };
                });
            };
        });
    };

Dragstart function

const dragStart = () => {
    const item = document.querySelectorAll('img.item');
      if (item) {
        item.forEach((img) => {
          img.addEventListener('dragstart', (e) => {
            console.log('drag starts...');
            e.dataTransfer.setData('text/plain', e.target.id);
            });
          });
        };
      };

Html

<div class="questions_card">
  <p class = "question-by-id" id="q1">Un design en <b>permaculture</b> requiert avant tout de l'observation. RDV dans votre <b>jardin</b>. Observez <b>l'orientation du vent</b>. Déplacez l'icone "vent" sur votre lot parcelaire.
  </p>
</div>
<div class="questions_card" style="display:none;">
  <p class = "question-by-id" id ="q2">Placez sur votre propriété, les <b>haies</b> et les <b>arbres</b>, s'il y en a.
  </p>
</div>
<div class="questions_card" style="display:none;">
  <p class = "question-by-id" id="q3">En fonction de la position de votre cuisine, placez dehors le <b>bac à compost</b> le plus près possible de la cuisine
  </p>
</div>
<div class="questions_card" style="display:none;">
  <p class = "question-by-id" id="q4">Observez le lever et coucher du soleil. Placer le soleil en fonction de l'orientation de son lever et coucher.</p>
</div>
<div class="questions_card" style="display:none;">
  <p class = "question-by-id" id="q5">Un <b>potager</b> doit être le plus possible exposé au soleil. Placez le potager en fonction de la place disponible et son <b>exposition maximale au soleil</b>.
  </p>
</div>
<div class="questions_card" style="display:none;">
  <p class = "question-by-id" id = "q6">Tout le long de vos clôtures, placez <b>l'ourlet d'herbes hautes</b>. On vous en expliquera l'utilité plus tard.
  </p>
</div>
<div class="questions_card" style="display:none;">
  <p class = "question-by-id" id ="q7">Observez la goutière la plus proche du potager. Placez le <b>bidon de récupération d'eau de pluie</b> à proximité de celle-ci.
  </p>
</div>
<div class="questions_card" style="display:none;">
  <p class = "question-by-id" id="q8">Placez selon la place une ou deux <b>haies de branchage</b> le long de l'ourlet d'herbes hautes.
  </p>
</div>
<div class="questions_card" style="display:none;">
  <p class = "question-by-id" id="q9">Identifiez la zone la plus ensoleillée, de préférence une zone proche du potager. Placez-y la "zone maigre"
  </p>
</div>
<div class="questions_card" style="display:none;">
  <p class = "question-by-id" id="q10">Cliquez sur "friche humide" et rdv dans le jardin. Photographiez les plantes dont vous ignorer l'identité. Lisez le texte qui les concerne. Poussent elles en sol humide? Si tel est le cas, placez la friche humide sur cette zone de votre propriete.
  </p>
</div>
<div class="questions_card" style="display:none;">
  <p class = "question-by-id" id = "q11">On y est presque. Cliquez sur "suivant" et répondez aux 3 dernière questions afin de nous permettre de calculer votre <b>design en permaculture</b>.
  </p>
</div>
<div class="questions_card" style="display:none">
    <p class = "question-by-id" id = "q12"><%= @find_question.content%>
    </p>
    <%= form_with url: question_answers_path(@find_question, @answer), method: :post do |form| %>
      <%= form.select :reponse, ["oui", "non", "je ne sais pas"] %>
        <%= form.submit %>
      <% end %>
</div>

<div class ="wrapper-design-icons">
  <div class="define-design">
    <img src="/assets/propriete/longeville.png" alt="votre design en permaculture" id ="show-design">
  </div>
  <div class="show-icons">
     <div class ="titles-icons">
       <h6 class ="icon-titles">Vents</h6>
       <img src="/assets/icons/vent.png" alt="l'orientation du vent au jardin" class="item" id="item1" draggable="true" data-show="icon1">
    </div>
    <div class ="titles-icons">
      <h6 class ="icon-titles">Haies</h6>
      <img src="/assets/icons/haies.png" alt="vos haies" class="item" id="item2" draggable="true" data-show="icon2">
    </div>
    <div class ="titles-icons">
      <h6 class ="icon-titles">Arbres</h6>
      <img src="/assets/icons/arbre.png" alt="les arbres au jardin" class="item" id="item3" draggable="true" data-show="icon3">
    </div>
    <div class ="titles-icons">
      <h6 class ="icon-titles">Haies de branchage</h6>
      <img src="/assets/icons/bois.png" alt="le bois mort" class="item" id="item4" draggable="true" data-show="icon4">
    </div>
    <div class ="titles-icons">
      <h6 class ="icon-titles">Compost</h6>
      <img src="/assets/icons/compost.png" alt="Faire votre compost" class="item" id="item5" draggable="true" data-show="icon5">
    </div>
    <div class ="titles-icons">
      <h6 class ="icon-titles">Coucher du soleil</h6>
      <img src="/assets/icons/ouest.png" alt="coucher du soleil" class="item" id="item6" draggable="true" data-show="icon6">
    </div>
    <div class ="titles-icons">
      <h6 class ="icon-titles">Friche humide</h6>
      <img src="/assets/icons/friche.png" alt="créer votre friche humide" class="item" id="item7" draggable="true" data-show="icon7">
    </div>
    
    <div class ="titles-icons">
       <h6 class ="icon-titles">Lever du soleil</h6>
       <img src="/assets/icons/est.png" alt="lever du soleil" class="item" id="item8" draggable="true" data-show="icon8">
    </div>
    <div class ="titles-icons">
       <h6 class ="icon-titles">Ourlet d'herbes hautes</h6>
       <img src="/assets/icons/ourlet.png" alt="ourlet d'herbes hautes" class="item" id="item9" draggable="true" data-show="icon9">
    </div>
    <div class ="titles-icons">
       <h6 class ="icon-titles">Potager</h6>
       <img src="/assets/icons/potager.png" alt="créer votre potager" class="item" id="item10" draggable="true" data-show="icon10">
    </div>
    <div class ="titles-icons">
       <h6 class ="icon-titles">Bac eau de pluie</h6>
       <img src="/assets/icons/pluie.png" alt="récupération d'eau de pluie" class="item" id="item11" draggable="true" data-show="icon11">
    </div>
    <div class ="titles-icons">
       <h6 class ="icon-titles">Muret en pierre</h6>
       <img src="/assets/icons/pierres.png" alt="mur en pierre sèche" class="item" id="item12" draggable="true" data-show="icon12">
    </div>
   
    <div class ="titles-icons">
       <h6 class ="icon-titles">Zone maigre</h6>
       <img src="/assets/icons/zone.png" alt="une zone maigre" class="item" id="item13" draggable="true" data-show="icon13">
    </div>
  </div>
</div>