Jquery hide or show text field based on radio button selection

I have the following code to display text box based on radio button selection. This does not work however. How to make this code work?

I want the text box field to show if useDockerCompose is chosen to Yes and hide if the selection is no.

<tr><td>
                <b>Docker Compose</b>
                <a href="#" id="dcPop" rel="popover" data-content="Application deploys set to use docker compose to spin up the container" data-original-title="Use Docker Compose"><i class="icon-question-sign"></i></a>
            </td><td>               
                <input type="radio" value="false" name="useDockerCompose" CHECKED> No &nbsp;
                <input type="radio" value="true" name="useDockerCompose"> Yes
            </td></tr>          
            <tr class="dccommandtext" style="display:none;">
                <td nowrap><b>Docker Compose Command</b></td>
                <td><input type="text" class="input-xxlarge" name="dccommand"></td>
            </tr>
      
      <script src="https://code.jquery.com/jquery-3.6.0.min.js"/>
    <script type="text/javascript">
        
        
        $(document).ready(function() {
                // Function to show/hide the Docker Compose Command input based on the selected radio button
                function showdccommand() {
                    var selectedValue = $('input[name="useDockerCompose"]:checked').val();
                    console.log("Selected value: " + selectedValue);  // For debugging

                    if (selectedValue === "false") {
                        $('.dccommandtext').hide();
                    } else {
                        $('.dccommandtext').show();
                    }
                }

                // Attach the 'change' event listener to the radio buttons
                $('input[name="useDockerCompose"]').on('change', showdccommand);

                // Trigger show/hide on page load to set the initial state based on the default selected value
                showdccommand();
                });
            
    </script>

Solution

Replace your jquery self closing script tag with proper opening <script> and closing </script> tags.

<tr>
  <td>
    <b>Docker Compose</b>
    <a href="#" id="dcPop" rel="popover" data-content="Application deploys set to use docker compose to spin up the container" data-original-title="Use Docker Compose"><i class="icon-question-sign"></i></a>
  </td>
  <td>
    <input type="radio" value="false" name="useDockerCompose" CHECKED> No &nbsp;
    <input type="radio" value="true" name="useDockerCompose"> Yes
  </td>
</tr>
<tr class="dccommandtext" style="display:none;">
  <td nowrap><b>Docker Compose Command</b></td>
  <td><input type="text" class="input-xxlarge" name="dccommand"></td>
</tr>

<!-- EDIT Need a closing script tag -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    // Function to show/hide the Docker Compose Command input based on the selected radio button
    function showdccommand() {
      var selectedValue = $('input[name="useDockerCompose"]:checked').val();
      console.log("Selected value: " + selectedValue); // For debugging

      if (selectedValue === "false") {
        $('.dccommandtext').hide();
      } else {
        $('.dccommandtext').show();
      }
    }

    // Attach the 'change' event listener to the radio buttons
    $('input[name="useDockerCompose"]').on('change', showdccommand);

    // Trigger show/hide on page load to set the initial state based on the default selected value
    showdccommand();
  });
</script>