Export html table with dropdown to Excel OR CSV using javascript

Question

I have a table that allow user to add more column OR edit existing column. Inside the existing columns there is dropdown list option for editing.

Like Mentioned in the Image:

I want to export this table in csv or in excel with this dropdown validation options. I tried to implement with export2csv() function but its not getting dropdown.

The output of my export2csv() function:

The output I want:

.html Code :

<div class="card-body">
        <div class="table-responsive">
          <table class="table dataTable" id="fuelData">
            <thead>
              <tr>
                <th>SNO</th>
                <th>Month/Year</th>
                <th>Fuel Zone</th>
                <th>Fuel Price/Litre</th>
                <th>Currency</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              
              {% for f in fuelData%}
              <tr id="{{f.id}}">
                <td>{{ forloop.counter }}</td>
                <td>
                  <span class="editSpan monthyear">{{f.last_modified}}</span>
                  <input class="form-control editInput monthyear" type="date" name="monthyear" value="{{f.last_modified}}" style="display: none;"> 
                  <small class="text-danger" id="err-monthyear"></small>
                </td>
                <td>
                  <span class="editSpan fuel_zone">{{f.fuel_zone}}</span>
                  <input class="form-control editInput fuel_zone" type="text" name="fuel_zone" value="{{f.fuel_zone}}" style="display: none;"> 
                  <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" name="fuel_price" value="{{f.fuel_cost}}" style="display: none;"> 
                  <small class="text-danger" id="err-fuel_price"></small>
                </td>
                <td>
                  <span class="editSpan fuel_currency">{{f.currency}}</span>
                  <select class="form-control editInput fuel_currency" name="fuel_currency" style="display: none;">
                    {% for c  in currency %}
                      <option value="{{c}}">{{c}}</option>
                    {% endfor %}
                </select>
                <small class="text-danger" id="err-fuel_currency"></small>
                </td>
                <td> 
                  <button type="button" class="btn btn-primary editBtn">Edit</button>
                  <button type="button" class="btn btn-secondary deleteBtn">Delete</button>
      
                  <button type="button" class="btn btn-success saveBtn" 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>
      </div>

Javascript Code :

<script>
 function export2csv(){
  let data = "";
  const tableData = [];
  const rows = document.querySelectorAll("table tr");
  for (const row of rows) {
    const rowData = [];
    for (const [index, column] of row.querySelectorAll("th, td").entries()) {
      if ((index + 1) % 3 === 0) {
        rowData.push('"' + column.innerText + '"');
      } else {
        rowData.push(column.innerText);
      }
    }
    tableData.push(rowData.join(","));
  }
  data += tableData.join("\n");
  const a = document.createElement("a");
  a.href = URL.createObjectURL(new Blob([data], { type: "text/csv" }));
  a.setAttribute("download", "data.csv");
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}
</script>

How can I get dropdown option in csv after exporting?

Thanks In advance!!