How to do following mask input problem?

Create an event binding to an input with the class (don't use ID if you don't have to) you are targeting. Use the jQuery .on method http://api.jquery.com/on/

Example:

<input class="classSelector" />

<script>  
  $(document).on("focus", "classSelector", function() { 
    $(this).mask("99:99");
  });
</script>

You can dynamically create as many of those inputs you want and mask them using the on event binding. Every new input with that class you create will get that event handler attached to it.

Use the livequery plug-in. Then give all elements you want to mask the class maskme. Now you can do:

$(".maskme").livequery(function(){
    $(this).mask('99:99');
});

This will mask inputs added even after the code is first run.

First Dont use ID on the input

<input type="text" name="STime[]" class="jClass"/>

Second if your using jQuery then use it. This is much easier to read.

<script type="text/javascript">
    function addRow(tableID) {
      var table = $("#" + tableID); //get the table
      var firstRowClone = $("tr:first", table).clone(); //clone the first row
      $("input:checkbox",firstRowClone).attr("checked", false);  // set all checkboxes to unchecked
      $("select", firstRowClone).each(function () { //Set all select lists to select first item
        this.selectedIndex = 0;
      }
      table.append(firstRowClone); //append the cloned row to the table.
      $("input:text", firstRowClone).val("").mask("99:99"); //set all input type="text" with value of "" and sets the mask on the clone.

    });

    function deleteRow(tableID) {
      $("#" + tableId + " tr:not(:eq(0))").remove(); //Remove all rows except the first row.         
    }


    $(document).ready(function {
      $('.jClass').mask('99:99'); //sets the mask on any rows loaded initially
    });

</script>