Converting upTime Function from Javascript to Jquery and use single functions for multiple IDs

Question

I have this code in Javascript, that counts up from a specific date-time. I intend to use one function for multiple IDs so I'm trying to convert to jQuery but can't seem to get it to work.

<script type="text/javascript">

   function upTime(countTo, yearField, daysField, hoursField, minutesField, secondsField) {
        now = new Date();
        countTo = new Date(countTo);
        difference = (now-countTo);

        days=Math.floor(difference/(60*60*1000*24)*1);
        years = Math.floor(days / 365);
        if (years > 1){ days = days - (years * 365)}
        hours=Math.floor((difference%(60*60*1000*24))/(60*60*1000)*1);
        mins=Math.floor(((difference%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
        secs=Math.floor((((difference%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);

        document.getElementById(yearField).firstChild.nodeValue = years;
        document.getElementById(daysField).firstChild.nodeValue = days;
        document.getElementById(hoursField).firstChild.nodeValue = hours;
        document.getElementById(minutesField).firstChild.nodeValue = mins;
        document.getElementById(secondsField).firstChild.nodeValue = secs;

      upTime.to=setTimeout(function(){ upTime(countTo, yearField, daysField, hoursField, minutesField, secondsField); },1000);
    }


     window.onload=function() {
    upTime('2010-12-03 23:12:00', 'y1', 'd1', 'h1', 'm1', 's1'); // ****** Change this line!
            // Month,Day,Year,Hour,Minute,Second
        }; 
</script>

Based on Eric's comment. I've come up with this jQuery plugin below. Is there anything I'm missing or not doing right?

      jQuery.fn.extend({
    upTime: function() {  

    return this.each(function() {
        var  countTo = $(this).attr('val');
      var  yearField = $(this).find(".y1");
      var  daysField = $(this).find(".d1");
      var  hoursField =  $(this).find(".h1");
      var minutesField =  $(this).find(".m1");
     var   secondsField =  $(this).find(".m1");

        now = new Date();
        countTo = new Date(countTo);
        difference = (now-countTo);

        days=Math.floor(difference/(60*60*1000*24)*1);
        years = Math.floor(days / 365);
        if (years > 1){ days = days - (years * 365)}
        hours=Math.floor((difference%(60*60*1000*24))/(60*60*1000)*1);
        mins=Math.floor(((difference%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
        secs=Math.floor((((difference%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);

        $(yearField).prepend(years);
        $(daysField).prepend(days);
         $(hoursField).prepend(hours);
         $(minutesField).prepend(mins);
         $(secondsField).prepend(secs);
    });
 }
});


// Use the newly created  method
$(".counter").upTime();

Need it to work with loops such as these below:

<!-- Multiple loops ->
<ul class="counter" val="2017-12-10 16:11:00">
    <li class="y1" >00<br>YR(S)</li>
    <li class="d1" >00<br>DY(S)</li>
    <li class="h1" >00<br>HR(S)</li>
    <li class="m1" >00<br>MI(S)</li>
    <li class="s1" >00<br>SE(S)</li>
</ul> 

<ul class="counter" val="2018-01-10 16:11:00">
    <li class="y1">00<br>YR(S)</li>
    <li class="d1">00<br>DY(S)</li>
    <li class="h1">00<br>HR(S)</li>
    <li class="m1">00<br>MI(S)</li>
    <li class="s1">00<br>SE(S)</li>
</ul>      

Answer 1

Finally figured it out.

// Plugin definition.
jQuery.fn.extend({
    upTime: function() {  

    return this.each(function() {
        var  countTo = $(this).attr('val');
      var  yearField = $(this).find(".y1");
      var  daysField = $(this).find(".d1");
      var  hoursField =  $(this).find(".h1");
      var minutesField =  $(this).find(".m1");
     var   secondsField =  $(this).find(".s1");

        now = new Date();
        countTo = new Date(countTo);
        difference = (now-countTo);

        days=Math.floor(difference/(60*60*1000*24)*1);
        years = Math.floor(days / 365);
        if (years > 1){ days = days - (years * 365)}
        hours=Math.floor((difference%(60*60*1000*24))/(60*60*1000)*1);
        mins=Math.floor(((difference%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
        secs=Math.floor((((difference%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);

        $(yearField).html(years+"<br><span>Year</span>");
        $(daysField).html(days+"<br><span>Day</span>");
         $(hoursField).html(hours+"<br><span>Hour</span>");
         $(minutesField).html(mins+"<br><span>Mins</span>");
         $(secondsField).html(secs+"<br><span>Secs</span>");

    });
 }
});


         setInterval(function(){
    $(".counter").upTime();
        }, 1000);

Answer 2

Take a look to jQuery.fn.extend() function, like this:

jQuery.fn.extend({
  upTime: function(options) {
    ... Do the things you need to initialize the counter
  }
});

Then you can do

$(".counter").upTime({
        countTo: $(this).find(".c1").attr('val'),
        yearField: $(this).find(".y1").attr('val'),
        daysField: $(this).find(".d1").attr('val'),
        hoursField: $(this).find(".h1").attr('val'),
        minutesField: $(this).find(".m1").attr('val'),
        secondsField: $(this).find(".m1").attr('val')
    });

Only a thing, remember that the this object references the context in wich is the code, not the element itself.