Untitled

<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
var stepr1;
var stepr2;
var stepr3;
var stepr4;
var intervalr1;
var intervalr2;
var intervalr3;
var intervalr4;
var thatr1;
var thatr2;
var thatr3;
var thatr4;

$(document).ready(function() {

    $("#relay-1").click(function() {
        thatr1 = this;
        stepr1 = 4;
        $(thatr1).button("option", "disabled", true);
        $(thatr1).val("....5");
        $(thatr1).button("refresh");
        intervalr1 = setInterval(funcr1, 1000);

        $.post("/gpio31");
    });

    $("#relay-2").click(function() {
        thatr2 = this;
        stepr2 = 4;
        $(thatr2).button("option", "disabled", true);
        $(thatr2).val("....5");
        $(thatr2).button("refresh");
        intervalr2 = setInterval(funcr2, 1000);

        $.post("/gpio33");
    });

    $("#relay-3").click(function() {
        thatr3 = this;
        stepr3 = 4;
        $(thatr3).button("option", "disabled", true);
        $(thatr3).val("....5");
        $(thatr3).button("refresh");
        intervalr3 = setInterval(funcr3, 1000);

        $.post("/gpio35");
    });

    $("#relay-4").click(function() {
        thatr4 = this;
        stepr4 = 4;
        $(thatr4).button("option", "disabled", true);
        $(thatr4).val("....5");
        $(thatr4).button("refresh");
        intervalr4 = setInterval(funcr4, 1000);

        $.post("/gpio37");
    });

    function funcr1() {
        switch(stepr1) {
            case 0:
                $(thatr1).val("5 sec");
                $(thatr1).button("option", "disabled", false);
                $(thatr1).button("refresh");
                clearInterval(intervalr1);
                break;
            default:
                $(thatr1).val("...." + stepr1);
                $(thatr1).button("refresh");
                stepr1--;
        }
    }

    function funcr2() {
        switch(stepr2) {
            case 0:
                $(thatr2).val("5 sec");
                $(thatr2).button("option", "disabled", false);
                $(thatr2).button("refresh");
                clearInterval(intervalr2);
                break;
            default:
                $(thatr2).val("...." + stepr2);
                $(thatr2).button("refresh");
                stepr2--;
        }
    }

    function funcr3() {
        switch(stepr3) {
            case 0:
                $(thatr3).val("5 sec");
                $(thatr3).button("option", "disabled", false);
                $(thatr3).button("refresh");
                clearInterval(intervalr3);
                break;
            default:
                $(thatr3).val("...." + stepr3);
                $(thatr3).button("refresh");
                stepr3--;
        }
    }

    function funcr4() {
        switch(stepr4) {
            case 0:
                $(thatr4).val("5 sec");
                $(thatr4).button("option", "disabled", false);
                $(thatr4).button("refresh");
                clearInterval(intervalr4);
                break;
            default:
                $(thatr4).val("...." + stepr4);
                $(thatr4).button("refresh");
                stepr4--;
        }
    }
});
</script>
</head>
<body>
<input id="relay-1" type="button" value="5 sec" data-inline="true" /><br />
<input id="relay-2" type="button" value="5 sec" data-inline="true" /><br />
<input id="relay-3" type="button" value="5 sec" data-inline="true" /><br />
<input id="relay-4" type="button" value="5 sec" data-inline="true" /><br />
</body>
</html>