Saving radio button selection - xpages

Question

I've been playing around with this all day but cannot seem to get it to work the way I want it to :o(
I am writing an application that allows users to select a menu in the canteen. I would like a nice table like this:
The options for the various menus are saved on the document menu which the user selected on the previous screen (listing the week) - this is saved in the data source menu.
The user then selects what s/he wants for that week - they then press save and I need to create a selection document that contains M1, M2 or M3 in the field called Monday (mon), M1, M2 or M3 in the field called Tuesday (tue) etc.
Now matter what I did I could not get the options too line up as I wanted them using what I knew of XPages. I have now ended up with the code below (only added the code for the Monday (Montag) line to give you an idea of what I am doing. The same code is basically repeated for each day of the week (will use a repeat control later down the line). How do I now either 1) attach my XPages field to the variable (as you can see I am using pure BootStrap) or find the value of the selected option in SSJS so I can create a new document using JS?
Any help would be greatly appreciated.
<!-- ======================== Montag ================================== -->
<div class="row">
<div class="row">
<div class="col-md-2">
<xp:text escape="true" id="computedField1">Montag</xp:text>
</div>
<div class="col-md-3">
<label class="radio-inline">
<input type="radio" name="montag" id="Radios1" value="M1">
<xp:text escape="true" id="computedField3">
<xp:this.value><![CDATA[#{javascript:menu.getItemValueString("mon_1");}]]></xp:this.value>
</xp:text>
</input>
</label>
</div>
<div class="col-md-3">
<label class="radio-inline">
<input type="radio" name="montag" id="Radios2" value="M2">
<xp:text escape="true" id="computedField4">
<xp:this.value><![CDATA[#{javascript:menu.getItemValueString("mon_2");}]]></xp:this.value>
</xp:text>
</input>
</label>
</div>
<div class="col-md-3">
<label class="radio-inline">
<input type="radio" name="montag" id="Radios3" value="M3">
<xp:text escape="true" id="computedField5">
<xp:this.value><![CDATA[#{javascript:menu.getItemValueString("mon_3");}]]></xp:this.value>
</xp:text>
</input>
</label>
</div>
</div>
</div>
changes suggested by Mark:
here the image:
[]
and the code:
<div class="col-md-3">
<label class="radio-inline">
<xp:radio id="Radios1" groupName="mon" value="#{wahl.mon}">
<xp:text escape="true" id="computedField3">
<xp:this.value><![CDATA[#{javascript:menu.getItemValueString("mon_1");}]]></xp:this.value>
</xp:text>
</xp:radio>
</label>
</div>
<div class="col-md-3">
<label class="radio-inline">
<xp:radio id="Radios2" groupName="mon" value="#{wahl.mon}">
<xp:text escape="true" id="computedField4">
<xp:this.value><![CDATA[#{javascript:menu.getItemValueString("mon_2");}]]></xp:this.value>
</xp:text>
</xp:radio>
</label>
</div>
<div class="col-md-3">
<label class="radio-inline">
<xp:radio id="Radios3" groupName="mon" value="#{wahl.mon}">
<xp:text escape="true" id="computedField5">
<xp:this.value><![CDATA[#{javascript:menu.getItemValueString("mon_3");}]]></xp:this.value>
</xp:text>
</xp:radio>
</label>
</div>

Answer 1

If you set up the radio buttons like this, they render according to the specs. Note that I've added a binding to a viewScope parameter.
<div
class="col-md-3">
<xp:radio
text="option 1"
disableTheme="true"
styleClass="radio-inline"
id="radio1"
selectedValue="M1"
groupName="montag"
value="#{viewScope.montagSelected}">
</xp:radio>
</div>
It generates the following HTML (I'm using the default 'Bootstrap3' theme):
<div class="col-md-3">
<label
for="view:_id1:radio1"
class="radio-inline">
<input id="view:_id1:radio1"
type="radio"
name="view:_id1:montag"
value="M1"
onchangetrigger="early-onclick">
option 1
</label>
</div>