Variable inside jQuery output code with HTML

OK I am sorry the title is very confusing but I didn’t wanted it to be duplicate thread.

I am running the following jQuery code to add a new row inside a table when user click a certain link

jQuery(function(){
      var counter = 1;
      jQuery('a.sumJobs').click(function(event){
          event.preventDefault();
          counter++;
          var newRow = jQuery('<tr><td><?php echo $x; ?></td><td><input type="text" name="designation[]" id="employer3" /></td><td><input name="from[]" type="text" class="datepicker" id="from<?php echo $x; ?>"/></td' +
              counter + '><td><input name="to[]" type="text" class="datepicker" id="to<?php echo $x; ?>" /></td>' +
              counter + '<td><input type="text" name="totalexp[]" id="totalexp" /></td></tr>');
          jQuery('table.sumJobs').append(newRow);
      });
  });

I have an $x variable which I want to increase by 1 when a new row is inserted. I need help to echo out var x inside this code. Thank You.

I have bad news for you - PHP and web pages don’t work that way.

PHP is what’s known as a pre-processor. The PHP code creates the HTML page and then sends the output to the web browser. After that there’s no more PHP and the web page runs the HTML/CSS/JavaScript with no further interaction with the PHP script that ran before.

Is there anyway I can add a number that increments by one in javascript in the said code?

I worked a little and got that done, but now I am facing a small issue.
The new that is inserted is not picking the date function I am using for a textbox. I am using a javascript date picker.

jQuery(function(){
      var counter = 5;
      jQuery('a.sumJobs').click(function(event){
          event.preventDefault();
          counter++;
          var newRow = jQuery('<tr><td>'+ counter +'</td><td><input type="text" name="designation[]" id="employer3" /></td><td><input name="from[]" type="text" class="datepicker" id="from'+ counter +'" /></td' +
              counter + '><td><input name="to[]" type="text" class="datepicker" id="to'+ counter +'" /></td>' +
              counter + '<td><input type="text" name="totalexp[]" id="totalexp" /></td></tr>');
          jQuery('table.sumJobs').append(newRow);
      });
  });

You can see the html I am embedding into the code. The class=“datepicker” works for the text box that loads automatically when page is loaded but these newly added texbox don’t pick the datepicker function
For reference here is the datepicker code.

$(function() {
        $( ".datepicker" ).datepicker({
          changeMonth: true
          ,changeYear: true
          ,yearRange: '1960:' + new Date().getFullYear()
        });
    });