Custom javascript - checkbox show/hide according to completion

In a form, I have a list of countries (checkboxes), that should show/hide countries according to what a user types. Currently it is showing the full list of countries (attached). I need the freelancer to adjust the attached HTML file, so the checkboxes inside <div id='trans-1'> will work as follows: 1) On top of the list, ADD one text input in which user should type part of the country name. 2) After each key is pressed (user is writing part of country name) update the checkboxes to show: A) All checkboxes of COUNTRIES WHOSE NAME MATCH what was written so far. (For example after user types 'ch' it should show China, Chile, Seicheles, etc. B) Should also show checkboxes who are already checked. So if "Brazil" is already marked, it will continue showing Brazil even if user types something such as 'ch' 3) The div that includes checkboxes should be scrollable with a maximum height of 200pixels or so (put any value that will look good, i will adjust it later) - Bootstrap 4.6, jQuery 3.6 is being used in website.