Allow multiple markers in leaflet map rails 5

Question

I need to allow users to place multiple markers, the max number of markers must be dynamic, the map is in a form, so when I send the form to the controller I have to get the latitude and longitude of the markers in an Array so I can processes them.

This is what I have for one marker:

  initialize: ->
    maps = $("*[data-mapanswer]")
    if maps.length > 0
      $.each maps, (index, map) ->
        App.MapAnswer.initializeMap map

    $(".js-toggle-map").on
      click: ->
        App.MapAnswer.toggleMap()

  initializeMap: (element) ->
    mapCenterLatitude        = $(element).data("map-center-latitude")
    mapCenterLongitude       = $(element).data("map-center-longitude")
    markerLatitude           = $(element).data("marker-latitude")
    markerLongitude          = $(element).data("marker-longitude")
    zoom                     = $(element).data("map-zoom")
    mapTilesProvider         = $(element).data("map-tiles-provider")
    mapAttribution           = $(element).data("map-tiles-provider-attribution")
    latitudeInputSelector    = $(element).data("latitude-input-selector")
    longitudeInputSelector   = $(element).data("longitude-input-selector")
    zoomInputSelector        = $(element).data("zoom-input-selector")
    removeMarkerSelector     = $(element).data("marker-remove-selector")
    editable                 = $(element).data("marker-editable")
    markerId                 = $(element).data("marker-id")
    answers                  = $(element).data("answers")
    marker                   = null
    markerIcon               = App.MapAnswer.createMarkerIcon(icon_related: false)
    markerRelatedIcon        = App.MapAnswer.createMarkerIcon(icon_related: true)

    createMarker = (latitude, longitude) ->
      markerLatLng  = new (L.LatLng)(latitude, longitude)
      marker  = L.marker(markerLatLng, { icon: markerIcon, draggable: editable })

      marker.addTo(map)
      return marker

    removeMarker = (e) ->
      e.preventDefault()
      if marker
        map.removeLayer(marker)
        marker = null
      $(latitudeInputSelector).val ""
      $(longitudeInputSelector).val ""
      $(zoomInputSelector).val ""
      return

    moveOrPlaceMarker = (e) ->
      if marker
        marker.setLatLng(e.latlng)
      else
        marker = createMarker(e.latlng.lat, e.latlng.lng)

      $(latitudeInputSelector).val(e.latlng.lat)
      $(longitudeInputSelector).val(e.latlng.lng)
      $(zoomInputSelector).val map.getZoom()
      return
    updateZoom = (e) ->
      $(zoomInputSelector).val map.getZoom()
      return

    if markerLatitude && markerLongitude
      mapCenterLatLng  = new (L.LatLng)(markerLatitude, markerLongitude)
    else
      mapCenterLatLng  = new (L.LatLng)(mapCenterLatitude, mapCenterLongitude)
    map              = L.map(element.id,{zoomControl: false}).setView(mapCenterLatLng, zoom)
    L.control.zoom({position: 'bottomright'}).addTo(map)
    L.tileLayer(mapTilesProvider, attribution: mapAttribution).addTo(map)

    if markerLatitude && markerLongitude
      marker  = createMarker(markerLatitude, markerLongitude)
    else if answers
      answers.forEach (answer) ->
        createMarker(answer[0], answer[1])

    if editable
      $(removeMarkerSelector).on "click", removeMarker
      map.on    "click",   moveOrPlaceMarker
      map.on    "zoomend", updateZoom


  createMarkerIcon: (marker_option) ->
    relatedIconClass = "map-icon-related" if marker_option.icon_related
    L.divIcon(
      className: "map-marker"
      iconSize:     [30, 30]
      iconAnchor:   [15, 40]
      html: "<div class='map-icon #{relatedIconClass}'></div>"
    )

I guess I have to modify createMarker but nothing is working