Radio button value is not changing for second time

Question

I have 3 radio buttons as shown below.

I want to change the placeholder of textbox1 and textbox2 as per the selection of radio buttons.

            @Html.RadioButtonFor(model => model.Type, "feet")
            @Html.Label("feet ")
              
            @Html.RadioButtonFor(model => model.Type, "meter")
            @Html.Label("meter")
              
            @Html.RadioButtonFor(model => model.Type, "cm")
            @Html.Label("Centimeter")

javascrpt code

  $(':radio[name=Type]').change(function () {        
        var value = $(this).val();
        var radiobutton= $(':radio[name=Type]:checked').val();
        $("#Type").val($(this).val());
        $("#textbox1").attr('placeholder', $(this).val())
        $("#textbox2").attr('placeholder', $(this).val())
  });

when I click on the radio buttons for the first time that time placeholders are changing as per selected radio buttons.

but when I click on the first radio button(feet) for the second time that time it's value is not changing but other radio buttons value is changing.

where I need to do changes?

Thanks in advance.

Answer 1

issue resolved by adding unique id for radio buttons

@Html.RadioButtonFor(model => model.Type, "feet", new { id = "feet" })
@Html.Label("feet ")
  
@Html.RadioButtonFor(model => model.Type, "meter", new { id = "meter" })
@Html.Label("meter")
  
@Html.RadioButtonFor(model => model.Type, "cm", new { id = "cm" })
@Html.Label("Centimeter")