valerianofilipec/assessmentcaseniq

<div class="response-area"> <ol class="response-set" aria-labelledby="Q366_QUESTION_TEXT"> <li id="Q366G1" >Header 1</li> <li id="Q366C1" class="response select-area">text 1</li> <li id="Q366C2" class="response select-area">text 2</li> <li id="Q366C3" class="response select-area">text 3</li> <li id="Q366C4" class="response select-area">text 4</li> <li id="Q366G2" >Header 2</li> <li id="Q366C5" class="response select-area">text 5</li> <li id="Q366C6" class="response select-area">text 6</li> <li id="Q366C7" class="response select-area">text 7</li> <li id="Q366C8" class="response select-area">text 8</li> <li id="Q366C9" class="response select-area">text 9</li> <li id="Q366C10" class="response select-area">text 10</li> <li id="Q366C11" class="response select-area">text 11</li> <li id="Q366G3" >Header 3</li> <li id="Q366C12" class="response select-area">text 12</li> <li id="Q366C13" class="response select-area">text 13</li> <li id="Q366C14" class="response select-area">text 14</li> <li id="Q366C15" class="response select-area">text 15</li> <li id="Q366C16" class="response select-area">text 16</li> <li id="Q366C17" class="response select-area">text 17</li> <li id="Q366G4" >Header 4</li> <li id="Q366C18" class="response select-area">text 18</li> <li id="Q366C19" class="response select-area">text 19</li> <li id="Q366C20" class="response select-area">text 20</li> </ol> </div>

Using only JScript or JQuery, how do you randomize this list above with the criteria below: 1 - header 1 needs to be always at the top of text1 to text4 group 2 - header 2 needs to be always at the top of text5 to text11 group 3 - header 3 needs to be always at the top of text12 to text17 group 4 - header 4 needs to be always at the top of text18 to text19 group 3 - text 20 have to be always the last option in this list.