I have a button here and try do it in jdfiddle and its worked but in html its not

Its worked in JSFiddle but not in notepad ++. Why ?
Only the first button is worked but not the second button. i tried to change the id to make it unique but it also doesnt work .also tried the class also didnt work. is there anything wrong here ? can someone help me ? really need someone who can help to solve this . Thank You in advance

JS CODE :

function getDate() {

    var sd = document.getElementById('start_date').value;
    var d = document.getElementById('duration').value;




    var date = new Date(sd);
    var newdate = new Date(date);
    var durations = parseInt(d);

    newdate.setDate((newdate.getDate() + durations)-1);


    var dd = newdate.getDate();
    var mm = newdate.getMonth()+1;
    var y = newdate.getFullYear();

    var someFormattedDate = y + '-' + mm + '-' + dd;
    document.getElementById('end_date').value = someFormattedDate;




} 

PHP CODE :

&sme_id=&pc_id=” enctype=”multipart/form-data”>

<tr>
    <th style="font-family:century gothic"><strong><font color="black">Major</font></strong></td>
    <th style="font-family:century gothic"><strong><font color="black">Stage</font></strong></td>
    <th style="font-family:century gothic"><strong><font color="black">Task</font></strong></td>
    <th style="font-family:century gothic"><strong><font color="black">Task Mark</font></strong></td>
    <th style="font-family:century gothic"><strong><font color="black">Marking</font></strong></td>
    <th style="font-family:century gothic"><strong><font color="black">Destination Marking</font></strong></td>
    <th style="font-family:century gothic"><strong><font color="black">Days</font></strong></td>
    <th style="font-family:century gothic"><strong><font color="black">Duration</font></strong></td>
    <th style="font-family:century gothic"><strong><font color="black">Start</font></strong></td>
    <th style="font-family:century gothic"><strong><font color="black">Finish</font></strong></td>  
    <th></th>
</tr>
</thead>
<tbody>
<?
    //GET DATA FROM PROJECT_SCHEDULE
    /*$sql ="SELECT task_name,task_mark,marking,destination_marking,start_date,end_date FROM project_detail_new
            WHERE stage_id='1'";*/

    /*$sql = "SELECT ps.ps_id,ps.pc_id,ps.major_id,pms.major_name,ps.stage_id,psl.stage_name,ps.task_id,pst.task_name,
            ps.task_mark,ps.marking,ps.destination_marking,ps.days,ps.duration,ps.start_date,ps.end_date,ps.sys_id,ps.agency_id   
            FROM project_schedule ps 
            LEFT JOIN project_major_stage pms 
            ON ps.major_id=pms.major_id 
            LEFT JOIN project_stage_list psl 
            ON ps.stage_id=psl.stage_id 
            LEFT JOIN project_stage_task pst 
            ON ps.task_id=pst.task_id 
            WHERE ps.pc_id='$pc_id'";*/
    $sql= "SELECT DISTINCT(ps.major_id),pms.major_name 
           FROM project_schedule ps 
           LEFT JOIN project_major_stage pms 
           ON ps.major_id=pms.major_id 
           WHERE ps.pc_id='$pc_id' ";

    $select = mysql_query($sql);
    $i= 1;
    while($list =mysql_fetch_array($select))
    {

        $major_name=$list['major_name'];
        $major_id=$list['major_id'];
?>
<tr>
    <td style ="font-family:century gothic"colspan="12"><strong><font color="black"><?echo $list['major_name'];?></font></strong></td>
</tr>

<?
    $sqla= "SELECT DISTINCT (ps.stage_id),psl.stage_name,pms.major_name
            FROM project_schedule ps
            LEFT JOIN project_stage_list psl
            ON ps.stage_id=psl.stage_id
            LEFT JOIN project_major_stage pms
            ON ps.major_id=pms.major_id
            WHERE ps.pc_id=1 AND pms.major_id='$major_id'";

    $selecta=mysql_query($sqla);
    while($lista =mysql_fetch_array($selecta))
    {

        $stage_name=$lista['stage_name'];
        $stage_id=$lista['stage_id'];
?>
<tr>
<td></td>
<td style="font-family:centruy-gothic" colspan="10"<strong><font color="black"><?echo $lista['stage_name'];?></font></strong></td>
</tr>


<?  
    $sqlb ="SELECT ps.*,pst.task_name,psl.stage_name
            FROM project_schedule ps 
            LEFT JOIN project_stage_task pst
            ON ps.task_id=pst.task_id 
            LEFT JOIN project_stage_list psl
            ON ps.stage_id=psl.stage_id
            WHERE ps.pc_id=1 AND psl.stage_id='$stage_id'";

    $selectb =mysql_query($sqlb);

    while($listb=mysql_fetch_array($selectb))
    {

        $ps_id=$listb['ps_id'];
        $task_name=$listb['task_name'];
        $task_mark=$listb['task_mark'];
        $marking=$listb['marking'];
        $destination_marking=$listb['destination_marking'];
        $days=$listb['days'];
        $duration=$listb['duration'];
        $start_date=$listb['start_date'];
        $end_date=$listb['end_date'];


?>

<!----THIS IS THE PHP CODE TO BE USED TO CALCULATE THE END DATE BASED ON START DATE ENTERED AND DURATION PICKED FROM DATABASE-->
<tr>
<td></td>
<td></td>

 <td style="font-family:century-gothic">
  <strong>
    <font color="black">
      <?echo $listb['task_name'];?>


    </font>
  </strong>
</td>

<td>
  <input type="text" id="task_mark1" class="task_mark" name="task_mark" value="<? echo $listb['task_mark'];?>" />
</td>

<td>
  <input type="text"  id="marking1" class="marking" name="marking" value="<? echo $listb['marking'];?>" />
</td>

<td>
  <input type="text" id="destination_marking1" class="destination_marking" name="destination_marking" value="<? echo $listb['destination_marking'];?>" />
</td>

<td>
  <input type="text" id="days1" class="days" name="days" value="<? echo $listb['days'];?>" />
</td>

<td>
  <input type="text" id="duration1" class="duration" name="duration" value="<? echo $listb['duration'];?>" />
</td>

<td>
  <input type="text" id="start_date1" class="start_date" name="start_date" value="<? echo $listb['start_date'];?>" />
</td>

<td>
  <input type="text" id="end_date1" class="end_date" name="end_date" value="<? echo $listb['end_date'];?>" />
</td>

<td align="center">

  <input type="button" id ="btn1" value="GENERATE" name="action" class ="submit-green" onclick="getDate(this.id)"/>

</td>

</tr>

<!--------------------------------------------------------------------------------------------------------------------------------------->
 <td>
  <input type="text" id="task_mark2" class="task_mark" name="task_mark" value="<? echo $listb['task_mark'];?>" />
</td>

<td>
  <input type="text"  id="marking2" class="marking" name="marking" value="<? echo $listb['marking'];?>" />
</td>

<td>
  <input type="text" id="destination_marking2" class="destination_marking" name="destination_marking" value="<? echo $listb['destination_marking'];?>" />
</td>

<td>
  <input type="text" id="days2" class="days" name="days" value="<? echo $listb['days'];?>" />
</td>

<td>
  <input type="text" id="duration2" class="duration" name="duration" value="<? echo $listb['duration'];?>" />
</td>

<td>
  <input type="text" id="start_date2" class="start_date" name="start_date" value="<? echo $listb['start_date'];?>" />
</td>

<td>
  <input type="text" id="end_date2" class="end_date" name="end_date" value="<? echo $listb['end_date'];?>" />
</td>

<td align="center">

  <input type="button" id ="btn2" value="GENERATE" name="action" class ="submit-green" onclick="getDate(this.id)"/>

</td>

</tr>
<?
    }}}
?>

<tr>
    <td colspan=5 align="center"><input class="submit-green" type="submit" value="Save" /></td>     
</tr>
</form>


You can do it as following: Make all your id’s for each row in table to be different increasing the number on the end from 1,2,3…etc. Example btn1, btn2, etc. And then in HTML code instead onclick=”getDate()” change to onclick=”getDate(this.id)”. And use the below javascript code with some changes to your code.

The Javascript code:

function getDate(id) {
    id = id.match(//d+/);
    var sd = document.getElementById('start_date'+ id).value;
    var d = document.getElementById('duration' + id).value;
    var date = new Date(sd);
    var newdate = new Date(date);
    var durations = parseInt(d);
    newdate.setDate((newdate.getDate() + durations)-1);
    var dd = newdate.getDate();
    var mm = newdate.getMonth()+1;
    var y = newdate.getFullYear();
    var someFormattedDate = y + '-' + mm + '-' + dd;
    document.getElementById('end_date' + id).value = someFormattedDate;
}

The HTML code:

<table>
  <thead>
    <tr>
      <td colspan=11 align="center"><input class="submit-green" type="submit" value="Save" /></td>
    </tr>
    <tr>
      <td style="font-family:century gothic"><strong><font color="black">Major</font></strong></td>
      <td style="font-family:century gothic"><strong><font color="black">Stage</font></strong></td>
      <td style="font-family:century gothic"><strong><font color="black">Task</font></strong></td>
      <td style="font-family:century gothic"><strong><font color="black">Task Mark</font></strong></td>
      <td style="font-family:century gothic"><strong><font color="black">Marking</font></strong></td>
      <td style="font-family:century gothic"><strong><font color="black">Destination Marking</font></strong></td>
      <td style="font-family:century gothic"><strong><font color="black">Days</font></strong></td>
      <td style="font-family:century gothic"><strong><font color="black">Duration</font></strong></td>
      <td style="font-family:century gothic"><strong><font color="black">Start</font></strong></td>
      <td style="font-family:century gothic"><strong><font color="black">Finish</font></strong></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="font-family:century gothic" colspan="12"><strong><font color="black">Initial</font></strong></td>
    </tr>
    <tr>
      <td></td>
      <td style="font-family:century gothic" colspan="11"><strong><font color="black">Prelim</font></strong></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td style="font-family:century gothic"><strong><font color="black">Side Rail</font></strong></td>

      <!----THIS IS THE PHP CODE TO BE USED TO CALCULATE THE END DATE BASED ON START DATE ENTERED AND DURATION PICKED FROM DATABASE-->
      <td>
        <input type="text" id="task_mark1" class="task_mark" value="" />
      </td>
      <td>
        <input type="text" id="marking1" class="marking" value="" />
      </td>
      <td>
        <input type="text" id="destination_marking1" class="destination_marking" value="" />
      </td>
      <td>
        <input type="text" id="days1" class="days" value="" />
      </td>
      <td>
        <input type="text" id="duration1" class="duration" value="" />
      </td>
      <td>
        <input type="text" id="start_date1" class="start_date" value="" />
      </td>
      <td>
        <input type="text" id="end_date1" class="end_date" value="" />
      </td>

      <td align="center">

        <input type="button" id="btn1" value="GENERATE" class="btnGenerate" onclick="getDate(this.id)" />
      </td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td style="font-family:century gothic"><strong><font color="black">Bina Stor</font></strong></td>

      <td>
        <input type="text" id="task_mark2" class="task_mark" name="task_mark" value="" />
      </td>
      <td>
        <input type="text" id="marking2" class="marking" name="marking" value="" />
      </td>
      <td>
        <input type="text" id="destination_marking2" class="destination_marking" name="destination_marking" value="" />
      </td>
      <td>
        <input type="text" id="days2" class="days" name="days" value="" />
      </td>
      <td>
        <input type="text" id="duration2" class="duration" name="duration" value="" />
      </td>
      <td>
        <input type="text" id="start_date2" class="start_date" name="start_date" value="" />
      </td>
      <td>
        <input type="text" id="end_date2" class="end_date" name="end_date" value="" />
      </td>
      <td align="center">
        <input type="button" id="btn2" value="GENERATE" class="btnGenerate" onclick="getDate(this.id)" />
      </td>
    </tr>
    <tr>
      <td colspan=5 align="center"><input class="submit-green" type="submit" value="Save" /></td>
    </tr>
  </tbody>
</table>