Multiple connected Radio input forms on single page

I am trying to implement multiple radio forms on a single page that communicate with each other.

So when you select a radio value in form A at the top of the page. It should display the same choice at the bottom on the page in form B. And vice versa.

How do i make this work?

i tried the following code:

const $selected = $('.course-date input:checked')

if ($selected.length > 0) {
const date = $selected.val()
$("input:radio[name='course-date-2']").val(date).attr('checked', true);
}

Based on the info provided, I believe what you are looking for is the following as shown in the snippet.
Where you need to set the radio button to checked using .prop().

If this is not it, please provide more details.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$('input[type="radio"]').on('change', function() {
  let selectedValue = $(this).val();
  console.log('radio button changed to: ', selectedValue);
  $('input[type="radio"][value=' + selectedValue + ']').prop('checked', true);
})

<!-- language: lang-css -->

form {
  border: 1px solid;
  padding: 2rem;
  background: #f1f1f1;
  font-family: sans-serif;
}

form + form {
  margin-top: 2rem;
}

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <h2>Form 1</h2>
  <input type="radio" id="course-date-1" name="course-date" value="course1" checked>
  <label for="course-date-1">course 1</label>
  <input type="radio" id="course-date-2" name="course-date" value="course2">
  <label for="course-date-2">course 2</label>
</form>

<form>
  <h2>Form 2</h2>
  <input type="radio" id="course-date-1A" name="course-date-A" value="course1" checked>
  <label for="course-date-1A">course 1</label>
  <input type="radio" id="course-date-2A" name="course-date-A" value="course2">
  <label for="course-date-2A">course 2</label>
</form>

<!-- end snippet -->