JSFiddle - React, Tailwind, and code Playground

by ipr101

HTML

<table class="list" id="images">
      <thead>
        <tr>
          <td class="left">Title:</td>
          <td class="left">Description:</td>
          <td class="left">Link:</td>
          <td class="left">Layout:</td>
          <td class="left">Image:</td>
          <td></td>
        </tr>
      </thead>
                          <tbody id="image-row0">
        <tr>
          <td class="left" style="background-color: rgb(255, 255, 255);">
                          <input type="text" value="Layout 2" name="banner_image[0][banner_image_description][1][title]">
            <img title="English" src="view/image/flags/gb.png"><br>
                                        </td>
          <td class="left" style="background-color: rgb(255, 255, 255);">
                          <textarea name="banner_image[0][banner_image_description][1][description]">descriptionsdsdfsd</textarea>
            <img title="English" src="view/image/flags/gb.png"><br>
                                        </td>
          <td class="left" style="background-color: rgb(255, 255, 255);"><input type="text" value="hair-at-porters" name="banner_image[0][link]"></td>
          <td class="left" style="background-color: rgb(255, 255, 255);">
            <select class="layouts" name="banner_image[0][layout]">
                                        <option value="1">Layout 1</option>
                                    <option selected="selected" value="2">Layout 2</option>
                                    <option value="3">Layout 3</option>
                                    <option value="4">Layout 4</option>
                                    <option value="5">Layout 5</option>
                                    <option value="6">Layout 6</option>
                                    <option value="7">Layout 7</option>
                                    <option value="8">Layout 8</option>
                                    <option value="9">Layout 9</option>
                              ...

JavaScript

$('select.layouts').bind("change keyup",function(){
var val = $(this).val();
    alert(val);
switch(parseInt(val)){
case 1:
    showImgs = 1;
    break;
case 2:
    showImgs = 2;
    break;
case 3:
    showImgs = 3;
    break;
case 4:
    showImgs = 4;
    break;
default:
    showImgs = 1;
}
alert(showImgs);    
alert($(this).parents("tr").find(".images .image").length);
    
$(this).parents("tr").find(".images .image:lt("+showImgs+")").show();
})