How to fix select drop down menu on mobile

See more:

Javascript

CSS3

HTML5

.column .dragbox{
        margin:5px 2px  20px;
        position: relative;
        border:1px solid #946553;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
    }
    .column .dragbox{
        margin:0;
        /*font-size:12px;*/
        color:#fff;
        border-bottom:1px solid #946553;
        font-family:Verdana;
        cursor:move;
        padding:5px;
    }

    .dragbox-content{
        margin:5px;
        font-family:'Lucida Grande', Verdana;
        font-size:0.8em;
        line-height:1.5em;
    }
    .column .placeholder{
        background: #EED5B7;
        border:1px dashed #946553;
    }

    .opIcons
    {
        background-image: url('iconSpirite.gif')!important;
        background-repeat: no-repeat;
        float:right;
        height:13px;
        width:13px;
        margin:0px 2px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>


<div id="column1" class="column ui-sortable">

<div class="dragbox" id="item5">

<div class="dragbox-content"></div>

<div class="setting">

<div style="font-weight:bold; width: 33%; float: left;">
<label style="margin-left: 8px;" for="contact_information_requested-first_name_chatbot">Lastname:</label>
</div>

<div style="font-weight:bold; width: 33%; float: left;">
<select class="dropdown-toggle" style="width: 95%" name="Quote[95009][value]" data-form-type="address,country">
<option value="0" selected="selected">Don't Ask This Question</option>
<option value="1">Request This From User</option>
<option value="2">Require User to Provide This</option>
</select>
</div>
</div>

<div style="font-weight:bold; width: 33%; float: left;"><input class="currentposition" type="hidden" size="1" name="Quote[95009][priority]" value="5">

<label class="current_position">5</label>
</div>
<div style="clear:both;"> </div>

</div>

<div class="dragbox" id="item6">

<div class="dragbox-content"></div>

<div class="setting">

<div style="font-weight:bold; width: 33%; float: left;">
<label style="margin-left: 8px;" for="contact_information_requested-first_name_chatbot">Zipcode:</label>
</div>

<div style="font-weight:bold; width: 33%; float: left;">

<select class="dropdown-toggle" style="width: 95%" name="Quote[95010][value]" data-form-type="address,country">

<option value="0" selected="selected">Don't Ask This Question</option>
<option value="1">Request This From User</option>
<option value="2">Require User to Provide This</option>

</select>
</div>
</div>

<div style="font-weight:bold; width: 33%; float: left;">
<input class="currentposition" type="hidden" size="1" name="Quote[95010][priority]" value="6">

<label class="current_position">6</label>
</div>

<div style="clear:both;"> </div>

</div>

<div class="dragbox" id="item7">

<div class="dragbox-content">

</div>

<div class="setting">

<div style="font-weight:bold; width: 33%; float: left;">
<label style="margin-left: 8px;" for="contact_information_requested-first_name_chatbot">Phone:</label>
</div>

<div style="font-weight:bold; width: 33%; float: left;">

<select class="dropdown-toggle" style="width: 95%" name="Quote[95011][value]" data-form-type="phone,country">
<option value="0" selected="selected">Don't Ask This Question</option>
<option value="1">Request This From User</option>
<option value="2">Require User to Provide This</option>
</select>
</div>
</div>

<div style="font-weight:bold; width: 33%; float: left;"><input class="currentposition" type="hidden" size="1" name="Quote[95011][priority]" value="7">

<label class="current_position">7</label>
</div>

<div style="clear:both;"> </div>

</div>

<div class="dragbox" id="item8">

<div class="dragbox-content"></div>

<div class="setting">
<div style="font-weight:bold; width: 33%; float: left;">
<label style="margin-left: 8px;" for="contact_information_requested-first_name_chatbot">Firstname:</label>

</div>

<div style="font-weight:bold; width: 33%; float: left;">
<select class="dropdown-toggle" style="width: 95%" name="Quote[95008][value]" data-dashlane-rid="dfa7f355a521619d" data-form-type="other">
<option value="0" selected="selected">Don't Ask This Question</option>
<option value="1">Request This From User</option>
<option value="2">Require User to Provide This</option>
</select>
</div>
</div>
<div style="font-weight:bold; width: 33%; float: left;">
<input class="currentposition" type="hidden" size="1" name="Quote[95008][priority]" value="8">

<label class="current_position">8</label>

</div>
<div style="clear:both;"> </div>
</div>
</div>

/** Add sortable/draggable function **/
       $('.column').sortable({
           connectWith: '.column',
           cursor: 'move',
           placeholder: 'placeholder',
           forcePlaceholderSize: true,
           opacity: 0.4,
           stop: function(event, ui)
           {
               /** Increment or decrement value based on element position **/
               $('.currentposition').each(function (i) {
                   let numbering = ++i + 4;
                   $(this).val(numbering);

               });

               /** Display ordering priority number **/
               $('.current_position').each(function (i) {
                   let numbering = ++i + 4;
                   $(this).text(numbering);

               });
           }
       }).disableSelection();

What I have tried:

I've tried searching for a solution all over the web, and I couldn't find anything that is specific to what I'm looking for. I tried adding " data-native-menu="false" ",I tried removing some "div" elements. I just don't understand as to why it works on Desktops but it doesn't work on mobile devices. At least it doesn't work on my LG Stylo 6.

What other methods can I try?