I would like to add two attributes to the layer. This layer drawn by using leaflet draw control( new L.Control.Draw). First attribute from drop down and another one as free text. I can do it separately with the pop-up option, but it does not work together. Please go through my code and help me to resolve this issue.

/ Leaflet Draw
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

var drawControl = new L.Control.Draw({
  edit: {
    featureGroup: drawnItems,
    poly: {
      allowIntersection: false
    }
  },
  draw: {
    circle: false,
    circlemarker: false,
    polygon: {
      allowIntersection: false,
      showArea: true,
      
    }
  }
});

map.addControl(drawControl);


const dropdown =
    `Opt from dropdown:
    <select id="ddlViewBy">
    <option value="building">building</option>
    <option value="road">road</option>
    <option value = "poi">poi</option>
    </select>: <button onclick="buttonFunction()">submit</button>`;



// Object created - bind popup to layer, add to feature group
map.on(L.Draw.Event.CREATED, function (event) {
  var layer = event.layer;
  var content = getPopupContent(layer);
  if (content !== null) {
    layer.bindPopup(content);
    
  }

  // Add info to feature properties
  feature = layer.feature = layer.feature || {};
  feature.type = feature.type || "Feature";
  var props = feature.properties = feature.properties || {}; // Intialize feature.properties
  props.info = content;
  //props.domain=domain;
  drawnItems.addLayer(layer);
  
  addPopup(layer)

  console.log(JSON.stringify(drawnItems.toGeoJSON())); 
});


function addPopup(layer) {
  var content = document.createElement("textarea");
  
    content.addEventListener("keyup", function () {
    //layer.getPopup().on('remove', function() {
      console.log('ffff')
      layer.feature.properties.desc = content.value;
    });
    layer.on("popupopen", function () {
      console.log('cccc')
      content.value = layer.feature.properties.desc;
      content.focus();
    });
    //layer.bindPopup(content,{closeOnClick: false, autoClose: true}).openPopup();
    layer.bindPopup().setPopupContent(dropdown)
    buttonFunction = () => {
      const dropdonwValue = document.getElementById("ddlViewBy").value;
      layer.feature.properties.domain = dropdonwValue;
      layer.bindPopup(dropdonwValue,{closeOnClick: false, autoClose: true})
    }
    var dupLayer= L.geoJSON(drawnItems);
    dupLayer.bindPopup(content,{closeOnClick: false, autoClose: true}).openPopup().addTo(map)
    
    
}