Drag and Drop between columns with Sort, move the cards between them

I'm developing an application where I have 3 columns of cards, I need the cards to be moved from one column to another and between each other.

I managed to get the card to be moved to another column, but I can only move it one time, once it is moved it can not be relocated to another position.

Follow the code:

<!-- Card Columns -->
                    <div class="row">
                        <div class="col-sm droppable ui-widget-header" id="do-now">
                            <!-- Card -->
                            <div class="card draggable ui-widget-content" id="card">
                                <div class="card-body">
                                    <strong id="card-label">eos-youtube-gjs <span id="card-spacing">#29</span></strong>
                                    <p id="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at urna rhoncus, elementum eros eu, mattis risus suspendisse</p>
                                    <img src="img/new_intern.jpeg" height="30px" width="30px">
                                    <strong id="user">username <span id="user-spacing">13 pts</span></strong>
                                </div>
                            </div>  
                            <!-- END Card -->
                        </div>
                        <div class="col-sm" id="do-later">

                        </div>
                        <div class="col-sm" id="on-hold">

                        </div>
                    </div>
                    <!-- END Card Columns -->       
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="dist/jquery-ui.js"></script>
    <script src="dist/jquery-ui.min.js"></script>
    <script>
        $(function() {
            $( ".draggable" ).draggable();
            $( ".droppable" ).droppable({
                drop: function (event, ui){
                    $(this)
                        .find (".card-body #card-label #card-spacing #card-text img #user #user-spacing");
                }
            });
        });

        $(function(){
            $("#do-now").sortable({
                handle: '.card .card-body #card-label #card-spacing #card-text img #user #user-spacing',
                connectWith: '#do-later #on-hold'
            }).disableSelection();
            $("#do-later").sortable({
                handle: '.card .card-body #card-label #card-spacing #card-text img #user #user-spacing',
                connectWith: '#do-now #on-hold'
            }).disableSelection();
            $("#on-hold").sortable({
                handle: '.card .card-body #card-label #card-spacing #card-text img #user #user-spacing',
                connectWith: '#do-now #do-later'
            }).disableSelection();
        });
    </script>
</body>

How do I make cards move as often as needed?