Changing an appended clone object in a loop - Javascript

I have a working JavaScript gist that create randomly three squares on the screen. The problem is now it's creating via the toAppend and clone() (see Initial Code at the bottom) 3 times the very same html block.

It generates currently:

<div class="info-square"><span class="square" data-target="#myInfoModal" data-toggle="modal" ></span></div>
<div class="info-square"><span class="square" data-target="#myInfoModal" data-toggle="modal" ></span></div>
<div class="info-square"><span class="square" data-target="#myInfoModal" data-toggle="modal" ></span></div>

I would like to have TO generate for each a different data-target for each div, like that:

<div class="info-square"><span class="square" data-target="#myInfoModal1"  data-toggle="modal" ></span></div>
<div class="info-square"><span class="square" data-target="#myInfoModal2"  data-toggle="modal" ></span></div>
<div class="info-square"><span class="square" data-target="#myInfoModal3"  data-toggle="modal" ></span></div>

The number 3 would come from the "var numInfoSquares"

INITIAL CODE

$(document).on('ready page:load', function () { 

    // Use jquery to display X squares according 
    var numInfoSquares = 3;
    var $zone = $("#zone");
    var $toAppend = $('<div class="info-square"><span class="square" data-toggle="modal" data-target="#myInfoModal"></span></div>');
    for (var c = 0; c < numInfoSquares; c++)
      $zone.append($toAppend.clone());
    // place squares randomly on the page
    function getRandomInt(min, max) {
      return Math.random() * (max - min + 1) + min;
    }
    $(".info-square").each(function () {
      var topPosition = getRandomInt(8, 70);  
      var leftPosition = getRandomInt(8, 92); 
      $(this).css({
        "top": topPosition+"%",
        "left": leftPosition+"%",
      });
    });   
  });  

Jquery for duplicate tabs

I am trying to create tabs in jquery and have been successful. However, there is one issue I am unable to solve and that is duplicate tabs.

With a single tab, jquery works fine but when I copy and paste that tab it does not work properly. I did add some extra code to find the tab in which the use is currently in by using the closest function but still no result.

Have a look at the code.

//HTML

<div class="tabsContainer">
    <ul class="tabs-nav">
        <li>
            <a href="#tab1" class="active">Tab One</a>
        </li>

        <li>
            <a href="#tab2">Tab Two</a>
        </li>

        <li>
            <a href="#tab3">Tab Three</a>
        </li>
    </ul>
    <section class="tabs-content">
       <div class="tabs active" id="tab1">
            This is tab 1<br />
            This is tab 1<br />
            This is tab 1<br />
        </div>

        <div class="tabs" id="tab2">
            This is tab 2<br />
            This is tab 2<br />
            This is tab 2<br />
        </div>

        <div class="tabs" id="tab3">
            This is tab 3<br />
            This is tab 3<br />
            This is tab 3<br />
        </div>
    </section>
</div>


//2nd tab
<div class="tabsContainer">
    <ul class="tabs-nav">
        <li>
            <a href="#tab1" class="active">Tab One</a>
        </li>

        <li>
            <a href="#tab2">Tab Two</a>
        </li>

        <li>
            <a href="#tab3">Tab Three</a>
        </li>
    </ul>
    <section class="tabs-content">
        <div class="tabs active" id="tab1">
            This is tab 1<br />
            This is tab 1<br />
            This is tab 1<br />
        </div>

        <div class="tabs" id="tab2">
            This is tab 2<br />
            This is tab 2<br />
            This is tab 2<br />
        </div>

        <div class="tabs" id="tab3">
            This is tab 3<br />
            This is tab 3<br />
            This is tab 3<br />
        </div>

    </section>
</div>

CSS Code

.tabsContainer{
    overflow:hidden;
}
.tabs-nav{
    overflow:hidden;
    margin:0;
    padding:0;
    list-style:none;
}
.tabs-nav li {
    display: inline-block;
    background: #34495E;
    border-width: 1px 1px 0 1px;
    border-style: solid;
    border-color: #34495E;
    margin-right: 5px;
}
.tabs-nav li a {
    display: block;
    padding: 10px 15px;
    font-weight: bold;
    color: #fff;
}
.tabs-nav li a.active {
    background: #FFF;
}

.tabs-nav li a.active {
    color: inherit;
}
.tabs-content {
    border: 1px solid #34495E;
    padding: 10px;
    background: #FFF;
    margin-top: -1px;
    overflow:hidden;
}
.tabs-content .tabs{
    overflow:hidden;
    display:none;
    margin:0 0 30px;
}
.tabs-content .tabs.active{
    display:block;
}

JAVAScript

$(function() {

    //listeing for click events
    $('.tabsContainer .tabs-nav li a').on('click', function(){

        //if more than 1 tab find out which tab you are currently in using the closest function
        //by clicking on the a tag it will find which container it is a part of.
        var $tab = $(this).closest('.tabsContainer'); 

        $tab.find('.tabs-nav li a.active').removeClass('active');
        $(this).addClass('active');
        //grabbing the tab which is clicked using the attribute "href"
        var currentClick = $(this).attr('href');

        //hiding the current panel
        //using a call back function. What this does is wait for the slideup to finish and then it will excute the call back function
        $tab.find('.tabs-content .tabs.active').slideUp(300, nextTab);

        //the call back function to show the new tab
        function nextTab(){
            $(this).removeClass('active');
            $(currentClick).slideDown(300, function(){
                $(this).addClass('active');
            });
        }
    });
});

check a checkbox and save it with the selected name using jquery

I'd like to assign a different homeworks to three different students , so once i choose the student from the drop down list and check with the checkbox the wanted homework for that student i like it to be his own homework "after a confirming message " so once again i choose another student and the homework that i already assign it to the previous student would be disable or hidden so it would be only assigning the non taken homeworks so in the end under each student will be the assigned homeworks using jquery.

i hope you would help me ... thank you

here is my code HTML

    <html>
    <div id="containerlog">
    <form>
    <label for="name">Student Name:</label>
    <select>
       <option value="Jhon">Jhon</option>
       <option value="Jessi">Jessi</option>
       <option value="Baker">Baker</option>
    </select>
    <div>
    <input type="checkbox"><label class="check" for="checkbox">HW-1</label>
    </div>
    <div>
    <input type="checkbox"><label class="check" for="checkbox">HW-2</label>
    </div>
    <div>
    <input type="checkbox"><label class="check" for="checkbox">HW-3</label>
    <br>
    </div>
    <div>
    <input type="checkbox"><label class="check" for="checkbox">HW-4</label>
    </div>
    <div>
    <input type="checkbox"><label class="check" for="checkbox">HW-5</label>
    </div>
    <div>
    <button type="button" onclick="alert('Are you sure!')">Submit</button>
    </div>
    <div id="checker"></div>
    </div>
    </form>

    *JQUERY*

    $(document).ready(function(){
    $( "input" ).on( "click", function() {
    $( "#checker" ).html( $( "input:checked" ).hide());
    });
    });

Wordpress: Need help to customize .js code to call out specific dynamic class within Visual Composer

Im a novice programmer / designer trying to have fun with some js libraries. With my basic knowledge of code I was able to get 80% there, but Im afraid Im missing the last piece of the puzzle. The site in question is www.topcatsmusic.com

At the bottom ive coded a player which utilizes js. Beneath the player Ive included a dynamic slider to display .jpg files or album covers. As it is now, Ive been using a simple href tag to send to external soundcloud source.

However, the plugin allows you to make API calls to en-queue the song within the player instead of sending to new window, outside source.

Sample API usage:

ToneDen.player.getInstanceByDom("#player").getTrack("http://ift.tt/1NpyKBY");

Custom JS file in use "Clickfunction.js"

  $('.ult-item-wrap a').click(function(e) {
    var sound = $(this).attr('href');
    ToneDen.player.getInstanceByDom("#player").addTracks(sound);
    ToneDen.player.getInstanceByDom("#player").removeTracks(0, 1);
    ToneDen.player.getInstanceByDom("#player").addTracks(sound);
    alert(ToneDen.player.getInstanceByDom("#player").getAllTracks());
    return false;
  });

So, if I load the JS file using the

<script> </script>

within my header - what do I need to do to customize this code so I can identify which song to load based on the custom class assigned to each image?

jquery function executing multiple time for bootstrap modal

$(document).on('click', '.event_class', function() {

    $('#originalImageShow').modal('show');

    $('#originalImageShow').on('shown.bs.modal',  function() {
        alert('Modal Open');
    });
    $('#originalImageShow').on('hidden.bs.modal', function() {
        alert('Modal Close');
        $('#originalImageShow').off();
        $(this).removeData('bs.modal');
    });

});

Hi, Each time I click the event_class It shows "Modal Open" alert twice. Even sometimes it shows multiple times. And also when I close the Bootstrap Modal sometimes it shows "Modal Close" alert multiple times. Basically number of alert number is changing randomly. Please help.

Why does this Javascript populate forms okay in Chrome and Firefox, but not Internet Explorer? [on hold]

Local Storage is used with Key 'Preferences' and content in JSON name: value: pairs.

Below is code my to populate a fieldset from that localstorage:

var fData = JSON.parse(localStorage.getItem('Preferences'));
if (fData) {
  for (var pair in fData) {      
        $('[name=' + fData[pair].name + ']').val(fData[pair].value);                            
  }
}

It works fine in Chrome and Firefox but not IE - any reason why not? How do I fix?

fade text from a word | javascript

i am trying to work on this javascript, where when the page loads, i need the text "Hello World" to zoom on page load, and it should pause for 3 seconds, and then when it zooms out, it should retain only "H" from hello and "W" from world. So when it zooms out, only H and W will go back to a position.

  window.onload = function() {

         // 3. Page load completes - the text "hello",
// has come to center with zoom 800%
$("#hello").animate({
  zoom: "350%",
  left: window.innerWidth / 2
}, 3000, function() {
  // 4. Pause for 3 seconds
  $(this).delay(3000)
  // 6. zooms out to 200% heading towards left top corner,
  // (logo position) 
  // 7. Fades out when reaching the logo 8. Logo appears
  .animate({
    zoom: "100%",
    left:0
  }, 3000, function() {
    $(this).fadeOut()
  })
})
         };


<div id="hello">
  <h1 style="zoom: 200%; transition: zoom 1s ease-in-out;">Hello World</h1>
</div>