Radio image selection - how to improve it?

Question

I'm completely newbie in JS. Could you please help me improve my code? Maybe it needs one function to all options. I don't know. It works good but I feel it, it needs to be improved ;)

I would like to do something like that

jQuery(".radio input:radio").each(function() {
    jQuery(this).click(function() {
        ...
    });
});

but I don't know how :(

<div>
    <div id="option287"></div> <div id="option123"></div>
</div>
  
<div id="input-option287">
    <script>
        function swap287(id) {
                const main = document.getElementById('option287');
                const div = document.getElementById("img_" + id);
                const clone = div.cloneNode(true);
                while (main.firstChild) main.firstChild.remove();
                main.appendChild(clone);
            }
    </script>
  <div class="radio">
      <label>
      <input type="radio" id="287_1" name="option[287]"  onclick="swap287('287_1')" value="677" title="" alt="">AAA
      <div style="display:none;"><img src="https://placeimg.com/640/480/people" id="img_287_1" alt="222"></div>
      </label>
    <label>
      <input type="radio" id="287_2" name="option[287]" onclick="swap287('287_2')" value="676" title="" alt="">BBB
      <div style="display:none;"><img src="https://placeimg.com/640/480/nature" id="img_287_2" alt="111"></div>
    </label>
  </div>
</div>
   
<p>Next option</p>
<div id="input-option123">
    <script>
        function swap123(id) {
                const main = document.getElementById('option123');
                const div = document.getElementById("img_" + id);
                const clone = div.cloneNode(true);
                while (main.firstChild) main.firstChild.remove();
                main.appendChild(clone);
            }
    </script>
  <div class="radio">
      <label>
      <input type="radio" id="123_1" name="option[123]"  onclick="swap123('123_1')" value="677" title="" alt="">1111
      <div style="display:none;"><img src="https://placeimg.com/640/480/tech" id="img_123_1" alt="222"></div>
      </label>
    <label>
      <input type="radio" id="123_2" name="option[123]" onclick="swap123('123_2')" value="676" title="" alt="">2222
      <div style="display:none;"><img src="https://placeimg.com/640/480/tech/sepia" id="img_123_2" alt="111"></div>
    </label>
  </div>
</div>

    <p>Next option</p>

Answer 1

I changed a few steps in your code:

1. Use only one swap function since only the ID is changing.
2. When you click on the radio button, call the swap function with the ID.
3. Change the content of the swap function to use the ID dynamically.

function swap(id) {
  const num = id.substring(0, 3);
  const main = document.getElementById('option' + num);
  const div = document.getElementById('img_' + id);
  const clone = div.cloneNode(true);
  while (main.firstChild) main.firstChild.remove();
  main.appendChild(clone);
}

jQuery(".radio input:radio").each(function() {
  jQuery(this).click(function() {
    swap($(this).attr('id'));
  });
});

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

<div id="input-option287">
  <script>
  </script>
  <div class="radio">
    <label>
      <input type="radio" id="287_1" name="option[287]" value="677" title="" alt="">AAA
      <div style="display:none;"><img src="https://placeimg.com/640/480/people" id="img_287_1" alt="222"></div>
      </label>
    <label>
      <input type="radio" id="287_2" name="option[287]" value="676" title="" alt="">BBB
      <div style="display:none;"><img src="https://placeimg.com/640/480/nature" id="img_287_2" alt="111"></div>
    </label>
  </div>
</div>

<p>Next option</p>
<div id="input-option123">
  <div class="radio">
    <label>
      <input type="radio" id="123_1" name="option[123]" value="677" title="" alt="">1111
      <div style="display:none;"><img src="https://placeimg.com/640/480/tech" id="img_123_1" alt="222"></div>
      </label>
    <label>
      <input type="radio" id="123_2" name="option[123]" value="676" title="" alt="">2222
      <div style="display:none;"><img src="https://placeimg.com/640/480/tech/sepia" id="img_123_2" alt="111"></div>
    </label>
  </div>
</div>

<p>Next option</p>