Hey I think you have to make proper structure first as you can see in your code there are different structure for dropdown.
Also you need to make some JS changes as I have done.
here is a working code as you want in the following snippet.
$(".dropdown-menu a").on("click", function() {
$(this).parent(".dropdown-menu").prev("button.dropdown-toggle").text($(this).text());
status = $("button.dropdown-toggle").text();
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="input-group-prepend">
<div class="dropdown">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-light dropdown-toggle" data-toggle="dropdown" type="button">List type</button>
<div class="dropdown-menu">
<a class="dropdown-item">Watching</a>
<a class="dropdown-item">Completed</a>
<a class="dropdown-item">On-Hold</a>
<a class="dropdown-item">Dropped</a>
<a class="dropdown-item">Plan to Watch</a>
</div>
</div>
<div class="dropdown">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-light dropdown-toggle" data-toggle="dropdown" type="button">Format</button>
<div class="dropdown-menu">
<a class="dropdown-item">TV</a>
<a class="dropdown-item">Movie</a>
<a class="dropdown-item">Special</a>
<a class="dropdown-item">OVA</a>
<a class="dropdown-item">ONA</a>
<a class="dropdown-item">Music</a>
</div>
</div>
</div>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
