JSFiddle - React, Tailwind, and code Playground

HTML

<script type='text/javascript'>
$( document ).ready(function() {
    $( "input[type='checkbox']" ).change(function()
    {
          var chk = $( this );
          if (chk.prop('checked')) $('#' + chk.attr('id') + '_value').val(chk.val());
    });
});
</script>

<input type='checkbox' value='Вариант1' id='service1' ><label for='service0'>Вариант1</label>
<input id='service1_value' type="text"><br />
<input type='checkbox' value='Вариант2' id='service2' ><label for='service1'>Вариант2</label>
<input id='service2_value' type="text"><br />
<input type='checkbox' value='Вариант3' id='service3' ><label for='service2'>Вариант3</label>
<input id='service3_value' type="text"><br />

JavaScript

<script type="text/javascript">
   $(document).ready(function() {

      $("#mainpage")
         .css("display", "none")
         .fadeIn(3000);

      $("div.button-set").on('click','button',function(e){

         e.preventDefault();

         var idx = $('div.button-set').children().index(this);
         var linkTarget = 'index_'+(idx+1)+'.html&'+$(this).closest('form').serialize();

         $("#mainpage").fadeOut(500, function(){
            window.location = linkTarget;      
         });
      });

   });