Append textbox in bootstrap selectpicker dropdwon

Question

I am using bootstrap selectpicker in my form, now I want to append the textbox in my selectpicker dropdown and I achieved it. But the issue is when I click on my dropdown it reloads the page. Here the code which I used.

var eleid = 'cDrpdwnQty';
$("#"+eleid).remove();
var html = '<div id="'+eleid+'" class="cDrpdwn dropdown bootstrap-select w-100"><button class="selectedBox btn dropdown-toggle btn-dropdown w-100"><div class="filter-option"><div class="filter-option-inner"><div class="filter-option-inner-inner">'+'select'+'</div></div></div></button><div class="dropdown-menu"><div class="inner show"><ul class="dropdown-menu inner show"></ul></div></div></div>';
var ele = $('body').find("select[name='prdqty']");
$('#custom_qty_div li:eq(0)').before("<li>first</li>");
ele.selectpicker('refresh');
ele.siblings('[data-toggle]').addClass('d-none');
var drpdwnhtml = ele.siblings('.dropdown-menu').html();
$(".custom_qty_div").html(html); 
$("#"+eleid+" ul").append('<li class="customText px-2 mt-1 mb-2 form-group"><input type="text" id="customoptqtyinput" name="customprdqty" class="form-control px-1 mb-0"><label for="customoptqtyinput" class="col-form-label ml-2">Custom Quantity</label></li>'+$(drpdwnhtml).find('ul').html());

$( "#"+eleid+' .selectedBox' ).on('click' ,function() {
    $( "#"+eleid+" ul" ).parents('.dropdown-menu').toggleClass('show');
        if($( "#"+eleid+" ul" ).parents('.dropdown-menu').hasClass('show')) {
                $('body').find("#customoptqtyinput").focus();
         } 
  });
        $( '#'+eleid+" ul li.active" ).on('click', function() {
            $( '#'+eleid+" ul" ).parents('.dropdown-menu').removeClass('show');
        });