Maintain visibility of a form-textinput when checkbox is checked

Question

In my HTML I have a form, where a user can select the checkbox "other" and a textbox appears. Otherwise the textbox is hidden. Below you can find my code. But if the user selects "other", types in his text und submits the form, the textbox is hidden again-although the checkbox maintain checked (saved in localStorage). I cannot find my mistake here.

Form:

<label class="form-check">
       <input class="form-check-input" name="filetype" type="checkbox" id="other" value="" onclick="save()">
       <span class="form-check-label"
             <input placeholder="e.g. 'msg'" name="other" onsubmit="save();" class="form-control input-lg" type="text" id="otherValue" value="{{extension}}">
       </span>
</label> <!-- form-check -->

Visible/Hidden

 <!--"Other"-filter-->
      <script type="text/javascript">
        var otherCheckbox = document.querySelector('input[id="other"]');
        var otherText = document.querySelector('input[id="otherValue"]');
        otherText.style.visibility = 'hidden';

        otherCheckbox.onchange = function(){
            if(otherCheckbox.checked) {
                otherText.style.visibility = 'visible';
                otherCheckbox.value = otherText.value;
                save();
            } else {
                otherText.style.visibility = 'hidden';
            }
        };
      </script>

Tried to solve this Problem by saving the info in the sessionStorage but it still does not work.

 <!--Save Checkbox-State-->
      <script type="text/javascript">
        const checkboxen = [...document.querySelectorAll("[type=checkbox]")].map(inp => inp.id); //list of all checkbox-IDs

        function save(){
            for (var i = 0 ; i< checkboxen.length; i++){
                var id = checkboxen[i];
                var checkbox = document.getElementById(id);
                sessionStorage.setItem(id,checkbox.checked);
            }
            var other = document.getElementById('otherValue');
            sessionStorage.setItem('otherValue',other.style.visibility);
        }
        function load(){
            for (var i = 0 ; i< checkboxen.length; i++){
                var id = checkboxen[i];
                var checked =JSON.parse(sessionStorage.getItem(id));
                document.getElementById(id).checked = checked;
            }
            var other = JSON.parse(sessionStorage.getItem('otherValue'));
            document.getElementById('otherValue').style.visibility = other;
        }
        function deleteCheckbox(){         
            sessionStorage.clear();
        }
       </script>

Thanks for any help <3

Answer 1

this is my solution:

<script type="text/javascript">
        var other = document.getElementById('other');
        var otherText =document.querySelector('input[id="otherValue"]');
        $(document).ready(function(){
            if (other.checked){
                otherText.style.visibility = 'visible';
                otherText.value = "{{extension}}";
                other.value  = "{{extension}}";
            } else {
                otherText.style.visibility = 'hidden';
                 otherText.value = "";
            }
         });