New Jquery Eq

by mauro_nappolini

HTML

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <!-- Include the jQuery library -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div class="list-one-wrapper" id="list-one-wrapper_1">
  <h1>Hello list one</h1>
  <ul class="matching-list-wrap" id="matching-list-wrap_1">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  </div>
 
 <div class="overlay-wrap" id="overlay-wrap_1">
     <ul class="matching-list-2" id="matching-list-2_1">
    <li>Matching Item 1
    <div class="close-icon">
    close</div> 
    </li>
    <li>Matching Item 2
     <div class="close-icon">
    close</div> 
    </li>
    <li>Matching Item 3
     <div class="close-icon">
    close</div> </li>
  </ul>
 </div>

  
  <script>
    // Your jQuery code goes here
    $(document).ready(function() {
      // Event handler for when a list item in List 1 is clicked
      $("#matching-list-wrap_1 li").on("click", function() {
        // Get the index of the clicked list item in List 1
        var clickedIndex = $(this).index();

        // Find the corresponding list item in List 2
        var correspondingItem = $("#matching-list-2_1 li").eq(clickedIndex);
        
        var listOneWrap = $("#list-one-wrapper_1")
        listOneWrap.css("display", "none");
        
        var listTwoWrap = $("#overlay-wrap_1")
        // set the wrapper of the li to display none
        listTwoWrap.css("display", "block");
        
        // Display the corresponding item 
        correspondingItem.css("display", "block");
        
        //When the close icon of the corresponding Item is clicked close the corresponding item and display the main wrap
        	correspondingItem.find(".close-icon").on( "click", function() {
 					 listOneWrap.css("display", "block");
           correspondingItem.css("display", "none");
           listTwoWrap.css("display", "none");
			} );	 
      });
    });
  </script>
  
  <!-- Add some CSS styles for...

JavaScript

let table = base.getTable('Praxisbeispiele');


let record = await input.recordAsync('Push to Webflow', table);
let webflowID = record.getCellValue('Praxisbeispiele Webflow Item ID');
let airtableID = record.getCellValue('Airtable ID');

//IF Webflow Item ID exists
if (webflowID) {
    //Blinder 1 - 4 is Empty 
    if (!record.getCellValue('Bilder 1') && !record.getCellValue('Bilder 2') && !record.getCellValue('Bilder 3') && !record.getCellValue('Bilder 4') ){
    let calltowebflow = await remoteFetchAsync(`https://api.webflow.com/collections/6388e5a94ecb1d93b5b4ecfc/items/${webflowID}?live=true`,
        {
            method: 'PATCH',
            body: JSON.stringify({
                fields: {
                "_archived": false,
                    "_draft": false,
                    "name": record.getCellValue('Praxisbeispiel'),
                    "contact-email": record.getCellValue('Contact Email'),
                    "beschreibung-der-wesentlichen-aspekte-des-projekts": record.getCellValue('Beschreibung der wesentlichen Aspekte des Projekts'),
                    "kategories": record.getCellValue('Kategorie Webflow ID (from Kategorie)'),
                    "location": record.getCellValue('Stadt / Gemeinde'),
                    "einwohner": record.getCellValue('Einwohner'),
                    "profile-image": record.getCellValue('Profile Image')[0].url,
                    "year": record.getCellValue('Jahr Projektabschluss'),
                    
                    "land-bundesland": record.getCellValue('Land/Bundesland').name,
                    "abgeschlossen-2": record.getCellValue('Abgeschlossen').name,
                    "10-000-einwohner-2": record.getCellValue('< 10.000 Einwohner').name,
                    "10-000-50-000-einwohner-2": record.getCellValue('10.000 - 50.000 Einwohner').name,
                    "50-000-einwohner-2": record.getCellValue('> 50.000 Einwohner').name,
                    "in-implementation": record.getCellValue('In...