Targeted input information in a form message box keeps resetting when anything else in the form is clicked.

I have been able to get everything to work in terms of getting the desired information to appear in one particular field within a form; however, once any selected information appears, it disappears as soon as any other part of the form is clicked. Any ideas how to prevent this from happening? 

Any insight and help is greatly appreciated!

Below is the current code:

<style>
    .list-down-btn
    {
    
      margin-top: 2px;
      border: 1px solid #000;
      padding: 2px 15px;
        text-decoration: none !important;
        color: #000;
        box-sizing: border-box;
      position:relative;
    }
  
  a.list-down-btn:after {
    content: "+";
    display: block;
    position: absolute;
    right: 5px;
    top: 0px;
}
.close:after{
  content: "-" !important;
}
    .list-group-collapse
    {
      overflow: hidden;
      list-style-type: none;
      padding: 5px 10px
    }
    
    .list-group-item{
      padding: 5px;
    }
    
    .list-group-collapse li  ul {
        /* margin-left: -15px;
        margin-right: -15px;
        margin-bottom: -11px; */
        border-radius: 0px;
        list-style-type: none;
    }
    
    .list-group-collapse li ul
    {
      border-radius: 0px !important;
      margin-top: 8px;
    }
    
    .list-group-collapse li  ul li {
        border-radius: 0px !important;
        border-left: none;
        border-right: none;
        /* padding-left: 32px; */
    }
    
    #musictype,
    #era,
    #artist,
    #song
    {
      display: none;
    }
    
  li.list-group-item.selected {
    background: #000;
    display: table;
    color: #fff;
    margin-top: 5px;
}
  
  #textarea-yui_3_17_2_1_1673995852814_19510-field{
    /*pointer-events:none;*/
  }
    </style>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
    
    $(document).ready(function() {
      $("#textarea-yui_3_17_2_1_1673995852814_19510-field").attr("readonly",true);
      
      $(document).on('click', '.list-down-btn', function(event) {
        event.preventDefault();
        var target = $(this).attr('data-toggle');
        //$(target).slideToggle();
        $(this).parentsUntil("ul").find(target).slideToggle();
        var clicked = event.target;
        $(clicked).toggleClass("close");
      });

//when a song clicked
$("#artist li").click(function(){
        $(this).toggleClass("selected");
var selected_songs = $("#artist li.selected");
//console.log(selected_songs);
var songs = "";
for(var i=0; i<selected_songs.length; i++){
var artist = $(selected_songs[i]).closest("ul#artist").siblings("a[data-toggle='#artist']").text();
  //console.log(artist);
  
  var song = $(selected_songs[i]).text();
    //console.log(song);
    songs += artist+" - "+song+"\n";
}
console.log(songs);
$("#textarea-yui_3_17_2_1_1673995852814_19510-field").val(songs);
        
console.log("selected: "+selected_songs);
var song = $(this).text();
//console.log(song);

});
      
      
    });
    
    
    </script>

Please pour through the following to begin to get an understanding of what is going on.

19 hours ago, creedon said:

Please pour through the following to begin to get an understanding of what is going on.

 

Thank you, I looked it over, though some of the information was a bit beyond me. I tried inputting the rough jem of code; however, I noticed no difference: the resetting of the field continues to happen. Is that code supposed to be part of the script section or its own section entirely? I also tried inserting it as code injection as the footer with the same outcome.