title: how to display images based on text box value from a gallery with minimum code jquery or javascript show below very helpful for me
body: <pre><code>  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css&quot;&gt;
    
    &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;http://code.jquery.com/ui/1.9.0/jquery-ui.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
  let count,count1,count2,count3,count4,count5,count6,count7;
  
      $(document).ready(function(){
          $('#myModal').modal('show');
          $(&quot;[id^='no']&quot;).hide();
         
          $(&quot;#clsSub&quot;).click(function(){
            var imgval =  document.getElementById(&quot;divimages&quot;).value;
            var drpval =  document.getElementById(&quot;dropZone&quot;).value;
           if(imgval === '1'){
              $(&quot;#no1&quot; ).show()
            }
            else if(imgval === '2' &amp;&amp; drpval !== ''){
                    $(&quot;#no1, #no2&quot; ).show()
            }
            else if(imgval === '3' &amp;&amp; drpval !== ''){
              $(&quot;#no1, #no2, #no3&quot; ).show()
            }
            else if(imgval === '4' &amp;&amp; drpval !== ''){
              $(&quot;#no1, #no2, #no3, #no4&quot; ).show()
            }
            else if(imgval === '5' &amp;&amp; drpval !== ''){
              $(&quot;#no1, #no2, #no3, #no4, #no5&quot; ).show()
            }
            else if(imgval === '6' &amp;&amp; drpval !== ''){
              $(&quot;#no1, #no2, #no3, #no4, #no5, #no6&quot; ).show()
            }
            else if(imgval === '7' &amp;&amp; drpval !== ''){
              $(&quot;#no1, #no2, #no3, #no4, #no5, #no6, #no7&quot; ).show()
            }
            else if(imgval === '8' &amp;&amp; drpval !== ''){
              $(&quot;#no1, #no2, #no3, #no4, #no5, #no6, #no7, #no8&quot; ).show()
            }
            else if(imgval === '9' &amp;&amp; drpval !== ''){
              $(&quot;#no1, #no2, #no3, #no4, #no5, #no6, #no7, #no8, #no9&quot; ).show()
            }
            else if(imgval === '10' &amp;&amp; drpval !== ''){
              $(&quot;#no1, #no2, #no3, #no4, #no5, #no6, #no7, #no8, #no9, #no10&quot; ).show()
            }
            else if(imgval === '11' &amp;&amp; drpval !== ''){
              $(&quot;#no1, #no2, #no3, #no4, #no5, #no6, #no7, #no8, #no9, #no10, #no11&quot; ).show()
            }
            else if(imgval === '12' &amp;&amp; drpval !== ''){
              $(&quot;#no1, #no2, #no3, #no4, #no5, #no6, #no7, #no8, #no9, #no10, #no11, #no12&quot; ).show()
            }
            else if(imgval === '13' &amp;&amp; drpval !== ''){
              $(&quot;#no1, #no2, #no3, #no4, #no5, #no6, #no7, #no8, #no9, #no10, #no11, #no12, #no13&quot; ).show()
            }
            else if(imgval === '14' &amp;&amp; drpval !== ''){
              $(&quot;#no1, #no2, #no3, #no4, #no5, #no6, #no7, #no8, #no9, #no10, #no11, #no12, #no13, #no14&quot; ).show()
            }
            else if(imgval === '15' &amp;&amp; drpval !== ''){
              $(&quot;#no1, #no2, #no3, #no4, #no5, #no6, #no7, #no8, #no9, #no10, #no11, #no12, #no13, #no14, #no15&quot; ).show()
            }
            else if(imgval === '16' &amp;&amp; drpval !== ''){
              $(&quot;#no1, #no2, #no3, #no4, #no5, #no6, #no7, #no8, #no9, #no10, #no11, #no12, #no13, #no14, #no15, #no16&quot; ).show()
            }
            else if(imgval === '17' &amp;&amp; drpval !== ''){
              $(&quot;#no1, #no2, #no3, #no4, #no5, #no6, #no7, #no8, #no9, #no10, #no11, #no12, #no13, #no14, #no15, #no16, #no17&quot; ).show()
            }
            else if(imgval === '18' &amp;&amp; drpval !== ''){
              $(&quot;#no1, #no2, #no3, #no4, #no5, #no6, #no7, #no8, #no9, #no10, #no11, #no12, #no13, #no14, #no15, #no16, #no17, #no18&quot; ).show()
            }
            else if(imgval === '19' &amp;&amp; drpval !== ''){
              $(&quot;#no1, #no2, #no3, #no4, #no5, #no6, #no7, #no8, #no9, #no10, #no11, #no12, #no13, #no14, #no15, #no16, #no17, #no18, #no19&quot; ).show()
            }
            else if(imgval === '20' &amp;&amp; drpval !== ''){
              $(&quot;#no1, #no2, #no3, #no4, #no5, #no6, #no7, #no8, #no9, #no10, #no11, #no12, #no13, #no14, #no15, #no16, #no17, #no18, #no19, #no20&quot; ).show()
            }
            else if(imgval === '21' &amp;&amp; drpval !== ''){
              $(&quot;#no1, #no2, #no3, #no4, #no5, #no6, #no7, #no8, #no9, #no10, #no11, #no12, #no13, #no14, #no15, #no16, #no17, #no18, #no19, #no20, #no21&quot;).show()
            }
            else if(imgval === '22' &amp;&amp; drpval !== ''){
              $(&quot;#no1, #no2, #no3, #no4, #no5, #no6, #no7, #no8, #no9, #no10, #no11, #no12, #no13, #no14, #no15, #no16, #no17, #no18, #no19, #no20, #no21, #no22&quot; ).show()
            }
            else if(imgval === '23' &amp;&amp; drpval !== ''){
              $(&quot;#no1, #no2, #no3, #no4, #no5, #no6, #no7, #no8, #no9, #no10, #no11, #no12, #no13, #no14, #no15, #no16, #no17, #no18, #no19, #no20, #no21, #no22, #no23&quot;).show()
            }
            else if(imgval === '24' &amp;&amp; drpval !== ''){
              $(&quot;#no1, #no2, #no3, #no4, #no5, #no6, #no7, #no8, #no9, #no10, #no11, #no12, #no13, #no14, #no15, #no16, #no17, #no18, #no19, #no20, #no21, #no22, #no23, #no24&quot; ).show()
            }
            else if(imgval === '25' &amp;&amp; drpval !== ''){
              $(&quot;#no1, #no2, #no3, #no4, #no5, #no6, #no7, #no8, #no9, #no10, #no11, #no12, #no13, #no14, #no15, #no16, #no17, #no18, #no19, #no20, #no21, #no22, #no23, #no24, #no25&quot; ).show()
            }
            else if(imgval === '26' &amp;&amp; drpval !== ''){
              $(&quot;#no1, #no2, #no3, #no4, #no5, #no6, #no7, #no8, #no9, #no10, #no11, #no12, #no13, #no14, #no15, #no16, #no17, #no18, #no19, #no20, #no21, #no22, #no23, #no24, #no25, #no26&quot; ).show()
            }
            else if(imgval === '27' &amp;&amp; drpval !== ''){
              $(&quot;#no1, #no2, #no3, #no4, #no5, #no6, #no7, #no8, #no9, #no10, #no11, #no12, #no13, #no14, #no15, #no16, #no17, #no18, #no19, #no20, #no21, #no22, #no23, #no24, #no25, #no26, #no27&quot; ).show()
            }
            else if(imgval === '28' &amp;&amp; drpval !== ''){
              $(&quot;#no1, #no2, #no3, #no4, #no5, #no6, #no7, #no8, #no9, #no10, #no11, #no12, #no13, #no14, #no15, #no16, #no17, #no18, #no19, #no20, #no21, #no22, #no23, #no24, #no26, #no27, #no28&quot;).show()
            }
            else if(imgval === '29' &amp;&amp; drpval !== ''){
              $(&quot;#no1, #no2, #no3, #no4, #no5, #no6, #no7, #no8, #no9, #no10, #no11, #no12, #no13, #no14, #no15, #no16, #no17, #no18, #no19, #no20, #no21, #no22, #no23, #no24, #no25, #no26, #no27, #no28, #no29&quot; ).show()
            }
            else if(imgval === '30' &amp;&amp; drpval !== ''){
              $(&quot;#no1, #no2, #no3, #no4, #no5, #no6, #no7, #no8, #no9, #no10, #no11, #no12, #no13, #no14, #no15, #no16, #no17, #no18, #no19, #no20, #no21, #no22, #no23, #no24, #no24, #no25, #no26, #no27, #no28, #no29, #no30&quot; ).show()
            }
           
       })     
  
    });
           
    &lt;/script&gt;
    &lt;style type=&quot;text/css&quot;&gt;
      .imgC{
        
        width: 60px;
        height: 60px;
        margin-top: 5px;
      }
      .wth {
    height: 70px;
    padding: 10px;
    border: 1px solid #aaaaaa;
  }
  
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class=&quot;container-fluid&quot;&gt;
  &lt;!-- The Modal --&gt;
    &lt;div class=&quot;modal&quot; id=&quot;myModal&quot;&gt;
      &lt;div class=&quot;modal-dialog&quot;&gt;
        &lt;div class=&quot;modal-content&quot;&gt;
        
          &lt;!-- Modal Header --&gt;
          &lt;div class=&quot;modal-header&quot;&gt;
            &lt;h4 class=&quot;modal-title&quot;&gt;Please Update the values&lt;/h4&gt;
            &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;&gt;&amp;times;&lt;/button&gt;
          &lt;/div&gt;
          
          &lt;!-- Modal body --&gt;
          &lt;div class=&quot;modal-body&quot;&gt;
              &lt;div class=&quot;row&quot; &gt;
                  &lt;div class=&quot;col-sm-5&quot;&gt;
                  &lt;label&gt;Number of images&lt;/label&gt;
              &lt;/div&gt;
              &lt;div&gt;
                &lt;label&gt;number of drop Zones&lt;/label&gt;              
              &lt;/div&gt;
              &lt;div class=&quot;col-sm-5&quot;&gt;
                    &lt;input type=&quot;text&quot; id='divimages' name=&quot;text&quot; class=&quot;form-control input-sm numbers&quot; /&gt;
                  &lt;/div&gt;
              &lt;div class=&quot;col-sm-5&quot;&gt;                  
                  &lt;input type=&quot;text&quot; name=&quot;&quot; id='dropZone' value=&quot;&quot; class=&quot;form-control input-sm drpimg&quot; /&gt;
              &lt;/div&gt;
                  
                  &lt;div class=&quot;col-sm-2 btn btn-primary btn-sm&quot; id=&quot;clsSub&quot; onclick=&quot;dosubmit()&quot;&gt;Submit&lt;/div&gt;
              
                  
              &lt;/div&gt;
  
          &lt;/div&gt;
          
          &lt;!-- Modal footer --&gt;
          &lt;div class=&quot;modal-footer&quot;&gt;
            &lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
          &lt;/div&gt;
          
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- modal close --&gt;
  
      &lt;!-- container end --&gt;
  
    &lt;div class=&quot;container&quot; style=&quot;border: 1px solid red; height: 250px; display: inline-flex;&quot;&gt;
    &lt;div class=&quot;row&quot; id=&quot;gallery&quot; style=&quot;width: 100%&quot;&gt;  
      &lt;img draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot;  id=&quot;no1&quot; src=&quot;images\1.png&quot; class=&quot;imgC &quot;&gt;
    &lt;img draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; id=&quot;no2&quot; src=&quot;images\2.png&quot; class=&quot;imgC &quot;&gt;
    &lt;img draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; id=&quot;no3&quot;  src=&quot;images\3.png&quot; class=&quot;imgC &quot;&gt;
    &lt;img draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; id=&quot;no4&quot;  src=&quot;images\4.png&quot; class=&quot;imgC &quot;&gt;
    &lt;img draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; id=&quot;no5&quot;  src=&quot;images\5.png&quot; class=&quot;imgC &quot;&gt;
    &lt;img draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; id=&quot;no6&quot;  src=&quot;images\6.png&quot; class=&quot;imgC &quot;&gt;
    &lt;img draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; id=&quot;no7&quot;  src=&quot;images\7.png&quot; class=&quot;imgC &quot;&gt;
    &lt;img draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; id=&quot;no8&quot;  src=&quot;images\8.png&quot; class=&quot;imgC &quot;&gt;
    &lt;img draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; id=&quot;no9&quot;  src=&quot;images\9.png&quot; class=&quot;imgC &quot;&gt;
    &lt;img draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; id=&quot;no10&quot; src=&quot;images\10.png&quot; class=&quot;imgC &quot;&gt;
    &lt;img draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; id=&quot;no11&quot; src=&quot;images\11.png&quot; class=&quot;imgC &quot;&gt;
    &lt;img draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; id=&quot;no12&quot; src=&quot;images\12.png&quot; class=&quot;imgC &quot;&gt;
    &lt;img draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; id=&quot;no13&quot; src=&quot;images\13.png&quot; class=&quot;imgC &quot;&gt;
    &lt;img draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; id=&quot;no14&quot; src=&quot;images\14.png&quot; class=&quot;imgC &quot;&gt;
    &lt;img draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; id=&quot;no15&quot; src=&quot;images\15.png&quot; class=&quot;imgC &quot;&gt;
    &lt;img draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; id=&quot;no16&quot; src=&quot;images\16.png&quot; class=&quot;imgC &quot;&gt;
    &lt;img draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; id=&quot;no17&quot; src=&quot;images\17.png&quot; class=&quot;imgC &quot;&gt;
    &lt;img draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; id=&quot;no18&quot; src=&quot;images\18.png&quot; class=&quot;imgC &quot;&gt;
    &lt;img draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; id=&quot;no19&quot; src=&quot;images\19.png&quot; class=&quot;imgC &quot;&gt;
    &lt;img draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; id=&quot;no20&quot; src=&quot;images\20.png&quot; class=&quot;imgC &quot;&gt;
    &lt;img draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; id=&quot;no21&quot; src=&quot;images\21.png&quot; class=&quot;imgC &quot;&gt;
    &lt;img draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; id=&quot;no22&quot; src=&quot;images\22.png&quot; class=&quot;imgC &quot;&gt;
    &lt;img draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; id=&quot;no23&quot; src=&quot;images\23.png&quot; class=&quot;imgC &quot;&gt;
    &lt;img draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; id=&quot;no24&quot; src=&quot;images\24.png&quot; class=&quot;imgC &quot;&gt;
    &lt;img draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; id=&quot;no25&quot; src=&quot;images\25.png&quot; class=&quot;imgC &quot;&gt;
    &lt;img draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; id=&quot;no26&quot; src=&quot;images\26.png&quot; class=&quot;imgC &quot;&gt;
    &lt;img draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; id=&quot;no27&quot; src=&quot;images\27.png&quot; class=&quot;imgC &quot;&gt;
    &lt;img draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; id=&quot;no28&quot; src=&quot;images\28.png&quot; class=&quot;imgC &quot;&gt;
    &lt;img draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; id=&quot;no29&quot; src=&quot;images\29.png&quot; class=&quot;imgC &quot;&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;&lt;div&gt;    
  &lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>
  <p>Summary :- I want to display images from container randomly based on value enter in textbox
  Example : Default all images will be in hidden . if I enter any number in text box 6 or 7 or 8 i have to display six or seven or eight images in container
  i had tried with jquery but lt is taking lots of lines for code i want to reduce the code in short cut</p>