How to save to the database column one items that are dragged and dropped to another column?

So what I would like to do is having column one where data shown from database, and this data can be dragged and dropped to column two, finally data in column two can be save to another table in the database. The css is added so anyone can try out and understand my question. I am new to javascript so I think the problem might be somewhere in the script field.

$(onPageLoad);

function onPageLoad()
{
  $( ".column" ).sortable({
    connectWith: ".column",
    handle: ".portlet-header",
    cancel: ".portlet-toggle",
    start: function (event, ui) {
      ui.item.addClass('tilt');
    },
    stop: function (event, ui) {
      ui.item.removeClass('tilt');
    }
  });

  $( ".portlet" )
    .addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
    .find( ".portlet-header" )
      .addClass( "ui-widget-header ui-corner-all" )
      .prepend( "<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");

  $( ".portlet-toggle" ).click(function() {
    var icon = $( this );
    icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" );
    icon.closest( ".portlet" ).find( ".portlet-content" ).toggle();
  });
}
function handleSaveButtonClick() {
  var dataToSave = [];
  $(".column:last-child .portlet-header").each(function() {
    var portletHeader = $(this).text();
    dataToSave.push(portletHeader);
  });

  $.ajax({
    type: "POST",
    url: "/workout/create",
    data: { data: dataToSave },
    success: function(response) {
      alert("Data saved successfully!");
    },
    error: function() {
      alert("Error while saving data!");
    }
  });
  $( "#saveButton" ).click(handleSaveButtonClick);
}

.tilt {
  transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -webkit-transform: rotate(3deg);
}

body {
  min-width: 520px;
}

.column {
  width: 170px;
  float: left;
  padding-bottom: 100px;
  border: 1px solid black;
}
.portlet {
  margin: 0 1em 1em 0;
  padding: 0.3em;
}
.portlet-header {
  padding: 0.2em 0.3em;
  margin-bottom: 0.5em;
  position: relative;
}
.portlet-toggle {
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -8px;
}
.portlet-content {
  padding: 0.4em;
}
.portlet-placeholder {
  border: 1px dotted black;
  margin: 0 1em 1em 0;
  height: 50px;
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Workout plan maker</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div class="column">
    <div class="portlet">
        <div class="portlet-header">A title</div>
        <div class="portlet-content">A description</div>
    </div>
    <div class="portlet">
        <div class="portlet-header">Another title</div>
        <div class="portlet-content">Another description</div>
    </div>
    <div class="portlet">
        <div class="portlet-header">One more title</div>
        <div class="portlet-content">One more description</div>
    </div>
</div>
<div class="column">
</div>
<button id="saveButton">Save</button>
</body>
</html>

Solution

at the moment when you click save the ajax does not execute because the click handler of the save button is within the handleSaveButtonClick function. try moving it outside of the function and it will work. code below

function handleSaveButtonClick() {
var dataToSave = [];
$(".column:last-child .portlet-header").each(function() {
  var portletHeader = $(this).text();
  dataToSave.push(portletHeader);
});

$.ajax({
  type: "POST",
  url: "/workout/create",
  data: { data: dataToSave },
  success: function(response) {
    alert("Data saved successfully!");
  },
  error: function() {
    alert("Error while saving data!");
  }
});
//from here
}
$( "#saveButton" ).click(handleSaveButtonClick);//to here