Basically I have created a drag and drop html template with javascript,what I want is get the inner html of dragged element in button onclick('') automatically to run a function, means what ever is dragged add name of element in button onclick('').

please help me with this..

<button class="btn btn-primary pull-right" id="show_graph">SHOW</button>

JavaScript code

  $('.drag').draggable({
    appendTo: 'body',
    helper: 'clone'
  });

  $('#dropzone').droppable({
    activeClass: 'active',
    hoverClass: 'hover',
    accept: ":not(.ui-sortable-helper)", 
    drop: function (e, ui) {
      var $el = $('<div class="drop-item"><details><summary>' + ui.draggable.text() + '</summary><div><label>More Data</label><input type="text" /></div></details></div>');
      $el.append($('<button type="button" class="btn btn-default btn-xs remove"><span class="fa-solid fa-trash text-white "></span></button>').click(function () { $(this).parent().detach(); }));
      $(this).append($el);
    }
  }).sortable({
    items: '.drop-item',
    sort: function () {
      $(this).removeClass("active");
    }
  });

Here is for loop used with help of Django and these are the draggable elements.

  {% for item in head %}
  <div class="col-12">
    <a class="border border-light btn att1 btn-default drag text-white my-2">{{item}}</a>
   </div>
  {% endfor %}