JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<script
src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"
integrity="sha256-eTyxS0rkjpLEo16uXTS0uVCS4815lc40K2iVpWDvdSY="
crossorigin="anonymous"
></script>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/css/custom-theme/jquery-ui-1.10.0.custom.css"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<script>
function sendData() {
let sport = document.getElementById("sport").value;
let distanceFrom = document.getElementById("distanceFrom").value;
let distanceTo = document.getElementById("distanceTo").value;
let location = document.getElementById("location").value;
let carousel = document.getElementById("carousel").value;
let APP_DATA = [sport, distanceFrom, distanceTo, carousel, location];
console.log(APP_DATA);
completion(JSON.stringify(APP_DATA));
}
window.onScriptableMessage = (data) => {
document.getElementById("result").innerHTML = data;
document.getElementById("result").classList.add("alert");
};
</script>
<script>
(function ($) {
$(function () {
var availableTags = [
"Agder",
"Arendal",
"Birkenes",
"Bygland",
"Bykle",
"Evje og Hornnes",
...