datepicker not getting in every row of datatables

Question

I have created table using datatables. In that table I'm adding new entry with Inline Row Add and editing existence entry with Inline Row Edit. like shown In images:

I want to add datepicker in Month/Year column for both Inline Row Add and Inline Row Edit. like mentioned in image:

but Its getting only in 1st row while editing. Its not getting while adding a new entry or while editing 2nd row and below rows.

Html Code:

<div class="table-responsive">
          <table class="table dataTable" id="fuelData">
            <thead>
              <tr>
                <th>SNO</th>
                <th>OPCO</th>
                <th>Month/Year</th>
                <th>Fuel Zone</th>
                <th>Fuel Type</th>
                <th>Fuel Price/Unit</th>
                <!-- <th>OPCO</th> -->
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              
              {% for f in fuelData%}
              
              <tr id="{{f.id}}">
                <td>{{ forloop.counter }}</td>
                <td>
                  <span class="editSpan fuel_opco">{{f.opco}}</span>
                  <select class="form-control editInput fuel_opco" id="add_new_opco" name="fuel_opco" style="display: none;">
                    {% for c  in opco %}
                      <option value="{{c}}">{{c}}</option>
                    {% endfor %}
                </select>
                <small class="text-danger" id="err-fuel_opco"></small>
                </td>
                <td>
                  <span class="editSpan monthyear">{{f.month_year}}</span>
                  <input class="form-control editInput monthyear" type="text" name="monthyear" id="datepicker" value="{{f.month_year}}" style="display: none;"> 
                  <small class="text-danger" id="err-monthyear"></small>
                </td>
                <td>
                  <span class="editSpan fuel_zone">{{f.fuel_zone}}</span>
                  <select class="form-control editInput fuel_zone" id="FuelZoneSelect" name="fuel_zone" style="display: none;">
                    {% for c  in FuelZone %}
                      <option value="{{c}}">{{c}}</option>  
                    {% endfor %}
                    <option value="1" data-bs-toggle="modal" data-bs-target="#valueModal" data-id="1">Add New Zone</option>
                  </select>
                  
                  <small class="text-danger" id="err-fuel_zone"></small>
                </td>
                <td>
                  <span class="editSpan fuel_zone">{{f.fuel_type}}</span>
                  <select class="form-control editInput fuel_zone" id="FuelZoneSelect" name="fuel_zone" style="display: none;">
                    {% for c  in FuelType %}
                      <option value="{{c}}">{{c}}</option>  
                    {% endfor %}
                   
                  </select>
                  
                  <small class="text-danger" id="err-fuel_zone"></small>
                </td>
                <td>
                  <span class="editSpan fuel_price">{{f.fuel_cost}}</span> 
                  <input class="form-control editInput fuel_price" type="number" id="editFuelPrice" name="fuel_price" value="{{f.fuel_cost}}" style="display: none;"> 
                  <small class="text-danger" id="err-fuelprice"></small>
                </td>
               
                <td> 
                  <i class='fa fa-edit editBtn' style="cursor: pointer;"></i>
                  <i class='fa fa-trash pl-3 deleteBtn' style="cursor: pointer;"></i>
                  <button type="button" class="btn btn-success saveBtn" onclick="validate_Edit_Form()" style="display: none;">Save</button>
                  <button type="button" class="btn btn-danger confirmBtn" style="display: none;">Confirm</button>
                  <button type="button" class="btn btn-secondary cancelBtn" style="display: none;">Cancel</button>
                </td>
                
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>

jquery datepicker code:

 $('#datepicker').datepicker({
          startView:'months',
          viewMode:'months',
          minViewMode:'months',
          format: 'mm-yyyy',
    });

Inline Add New row:

var table = $("#fuelData").DataTable();
var row = ["1",
          "<select class='form-control addInput add_fuel_opco' id='add_new_opco' name='add_fuel_opco'>"+ optionsOpcoName+"</select> <small class='text-danger' id='err-fuel_opco'></small>",
          "<input class='form-control addInput monthyear' type='text' name='monthyear' id='date_picker'>  <small class='text-danger' id='err-month_year'></small>",
          "<select class='form-control addInput add_fuel_zone' id='select_fuel_zone' name='add_fuel_zone'>"+ optionsfuelzone + "</select> <small class='text-danger' id='err-fuel_zone'></small>",
          "<select class='form-control addInput add_fuel_type' id='select_fuel_type' name='add_fuel_type'>"+ optionsFuelType+"</select>  <small class='text-danger' id='err-fuel_type'></small>", 
          "<input class='form-control addInput add_fuel_price' id='add_new_fuel_price' type='number' name='add_fuel_price'> <small class='text-danger' id='err-fuel_price'></small>", 
          "<i class='fa fa-play SaveDataBtn' onclick='validate_Form()' id='saveNewFuelZone' style='cursor: pointer;'></i><i class='fa fa-trash pl-4 cancleBtn' style='cursor: pointer;'></i>"];
    // Add New Inline Row
          table.row.add(row).draw(false);
          table.order([1]).draw();

How can I get datepicker In datatables all row and while adding new row?