JSX: The reusable coding structure implementing in Jquery

I am going crazy and mixing the code structure here and there these days. I am working on a Django-react project from the last 8 months. I tried to implement the reusable components and JSX structure in jquery 😆. My story begins here,

Recently, we got a new project. The project was small. The project is about the visualization of a couple of static maps in geoportal. I don't want to integrate react for such a small project. I decided to use Django with jquery (Since I was very confident with Django-jquery combo). The thing is now I am messing things up. I am feeling crazy now. I am still thinking, is it the best way to do it? Let me know in the comment section if you have any suggestions. I am implementing the react reusable component structure in jquery (Looks like fun right? let's see how did I do it 😝).

This is not the actual JSX, but using this method, we can produce the reusable HTML components.

I have six map layers. I made the js array as below(I could use the database for storing this information, but the data are static, I didn't feel like storing them in the database as well). In the below array,

layerCode is used for getting the map from geoserver

layerTitle is used for the title of the layer

checked is used for the default option whether the layer is on or off by default.

thumbnail is used to show the thumbnail of the layer. It was stored inside the img folder.

description is the layer description

const layers = [
  {
    layerCode: "site2_chm",
    layerTitle: "Canopy Height Model (CHM)",
    checked: "checked",
    thumbnail: "./img/florida_chm.PNG",
    description:
      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima nobis soluta molestiae asperiores quae! Veritatis",
  },
  {
    layerCode: "site2_dtm",
    layerTitle: "Digital Terrain Models (DTM)",
    checked: "checked",
    thumbnail: "./img/florida_dtm.PNG",
    description:
      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima nobis soluta molestiae asperiores quae! Veritatis",
  },

  {
    layerCode: "final_CHM_merged_dem_p082020_shifted",
    layerTitle: "CHM merged DEM",
    checked: "false",
    thumbnail: "./img/chm.PNG",
    description:
      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima nobis soluta molestiae asperiores quae! Veritatis",
  },
  {
    layerCode: "final_DSM_25cm_vDEM_p082020_shifted",
    layerTitle: "DSM 25 cm vDEM",
    checked: "false",
    thumbnail: "./img/vdem.PNG",
    description:
      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima nobis soluta molestiae asperiores quae! Veritatis",
  },
  {
    layerCode: "final_DSM_25cm_vGrid_p082020_shifted",
    layerTitle: "DSM 25cm vGrid",
    checked: "false",
    thumbnail: "./img/vgrid.PNG",
    description:
      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima nobis soluta molestiae asperiores quae! Veritatis",
  },
  {
    layerCode: "DEM_input_lowest_selected_p082020_shifted",
    layerTitle: "DEM input lowest selected",
    checked: "false",
    thumbnail: "./img/florida_dtm.PNG",
    description:
      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima nobis soluta molestiae asperiores quae! Veritatis",
  },
];

I wrote the function for generating the JSX like structure (similar to the functional component in react 😜). The function will take the argument as the key from the above array object.

// Layer card generator function 
const layerCardGenerator = (
  layerCode,
  checked,
  thumbnail,
  layerTitle,
  description
) =>
  `<div class="card-body layer-card">
    <div class="row">
      <div class="col-4 thumbnails">
        <img src=${thumbnail} alt="" class="img-fluid" />
      </div>
      <div class="col-8">
        <div style="display: flex; justify-content: space-between">
          <span class="d-block layer-title mt-2">${layerTitle}</span>
          <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input layer-card-cb" name="${layerTitle}" id=${layerCode} ${checked} />
            <label class="custom-control-label" for=${layerCode}></label>
          </div>
        </div>
        <div class="description">${description}</div>
      </div>
    </div>
    <div style="display: flex">
      <label for="opacity">
        <b class="mr-5 mt-2">Opacity: </b>
      </label>
      <input
        type="range"
        class="form-control-range opacity"
        code=${layerCode}
        value="60"
        min="0"
        max="100"
        data-toggle="tooltip" 
        title="Opacity: 60%"
      />
    </div>
  </div>`;

Now I can iterate the layerCardGenerator function using the layer array. I appended all generated layer cards to the .left-sidebar section.

layer.map((l) => {
    $(".left-sidebar").append(
      layerCardGenerator(
        l.layerCode,
        l.checked,
        l.thumbnail,
        l.layerTitle,
        l.description
      )
    );
  });

Finally, our reusable component on jquery is implemented successfully 😍.